/* Card-specific styles for the "rbac" harbor course (class prefix .hb-rbac-).
 * The API server is a harbour gatehouse: requests arrive as cargo tickets carried by a ServiceAccount badge,
 * the gatekeeper walks the bindings (passes on a board) to a role's rules, then stamps ALLOW or 403.
 * Namespaces are docks; each resource on a dock shows how far the access reaches. */
.hb-rbac-icon { width:22px; height:22px; flex-shrink:0; overflow:visible; }
.hb-panel-head>b svg.hb-rbac-icon { width:24px; height:24px; }

/* Who is asking: a ServiceAccount badge or a person in a group. */
.hb-rbac-badge { display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%; padding:4px 10px 4px 5px; border:2px solid #5aa6c6; border-radius:12px; background:#fffbea; box-shadow:0 3px 0 #5aa6c6; color:#244958; }
.hb-rbac-badge.person { border-color:#6fb88d; box-shadow:0 3px 0 #6fb88d; }
.hb-rbac-badge>span { display:grid; min-width:0; line-height:1.25; }
.hb-rbac-badge b { font:800 12px var(--mono); overflow-wrap:anywhere; }
.hb-rbac-badge small { font:600 10px var(--mono); color:#5d6a64; }
.hb-rbac-badge.small { padding:2px 7px 2px 3px; border-width:1.5px; box-shadow:0 2px 0 #5aa6c6; gap:4px; }
.hb-rbac-badge.person.small { box-shadow:0 2px 0 #6fb88d; }
.hb-rbac-badge.small .hb-rbac-icon { width:17px; height:17px; }
.hb-rbac-badge.small b { font-size:10.5px; }
.hb-rbac-badge.small small { font-size:9px; }

/* A request ticket: a cargo cube with "verb resource/name -n ns". */
.hb-rbac-ticket { display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%; padding:4px 10px 4px 4px; border:2px solid #b59c61; border-radius:11px; background:linear-gradient(#fff7d8,#f5e5b6); box-shadow:0 3px 0 #ab905b; color:#3f4a38; }
.hb-rbac-ticket>svg.hb-cube { width:24px; height:27px; flex-shrink:0; }
.hb-rbac-ticket-body { display:flex; flex-wrap:wrap; align-items:center; gap:3px 6px; min-width:0; }
.hb-rbac-ticket code { min-width:0; font:800 11.5px var(--mono); overflow-wrap:anywhere; }
.hb-rbac-ticket .hb-chip { font-size:9.5px; padding:0 5px; }
.hb-rbac-ticket.on { border-color:#a98048; box-shadow:0 3px 0 #9a7848,0 0 0 4px #ffe4a088; animation:hb-rbac-arrive .45s ease-out both; }
.hb-rbac-ticket.idle { border-style:dashed; box-shadow:none; background:#fffcf0; opacity:.7; }
div.hb-rbac-ticket.idle { padding:8px 12px; font:600 11px var(--sans); color:#6b7159; }

/* The gatehouse. */
.hb-rbac-gate { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) auto; align-items:center; gap:14px; padding:14px; border:3px solid #5c7e7d; border-radius:20px; background:repeating-radial-gradient(ellipse at 50% 120%,transparent 0 18px,#ffffff40 19px 21px,transparent 23px 34px),#cdeee2; box-shadow:0 5px 0 #567979; }
.hb-rbac-arrive { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; }
.hb-rbac-arrow { font:800 18px var(--mono); color:#537e76; line-height:1; padding-left:12px; }
.hb-rbac-house { position:relative; min-width:0; padding:10px 12px 12px; border:2px solid #7a5a2f; border-top:7px solid #a98048; border-radius:8px 8px 14px 14px; background:#fff6db; box-shadow:0 4px 0 #7a5a2f; transition:opacity .25s; }
.hb-rbac-house::before { content:''; position:absolute; left:18%; right:18%; top:-17px; height:10px; border:2px solid #7a5a2f; border-bottom:0; border-radius:10px 10px 0 0; background:#c9b48a; }
.hb-rbac-house.dim .hb-rbac-passes { opacity:.45; }
.hb-rbac-house>header { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:8px; color:#4d3d2a; }
.hb-rbac-house>header b { font:800 12px var(--mono); }
.hb-rbac-house>header small { margin-left:auto; font:600 10.5px var(--sans); color:#6b5a3a; }
.hb-rbac-empty { margin:4px 0; font:700 11px var(--sans); color:#8b3f30; }
.hb-rbac-passes { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.hb-rbac-pass { min-width:0; padding:7px 9px; border:2px solid #b8a576; border-radius:11px; background:linear-gradient(#fffbea,#f6ebc8); box-shadow:0 2px 0 #b39a62; transition:opacity .25s; }
.hb-rbac-pass-head,.hb-rbac-pass-row { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; min-width:0; }
.hb-rbac-pass-head b,.hb-rbac-pass-row b { font:800 11.5px var(--mono); color:#2f4f4c; overflow-wrap:anywhere; }
.hb-rbac-pass-row { margin-top:3px; padding-left:6px; }
.hb-rbac-pass .hb-chip { font-size:10px; padding:0 6px; }
.hb-rbac-pass .hb-rbac-icon { width:18px; height:18px; }
.hb-rbac-to { font:800 12px var(--mono); color:#7a5a2f; }
.hb-rbac-rules { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:3px; }
.hb-rbac-rules li { padding:2px 7px; border-radius:6px; border:1.5px dashed #d8c9a0; background:#fffcf0; font:600 10.5px/1.5 var(--mono); color:#4b5338; overflow-wrap:anywhere; }
.hb-rbac-rules li.hit { border:1.5px solid #6aa274; background:#dff2d6; color:#2d694b; font-weight:800; }
.hb-rbac-rules li.none { color:#8b3f30; }
.hb-rbac-why { display:block; margin-top:5px; font:700 10.5px var(--mono); color:#9c3d2d; overflow-wrap:anywhere; }
.hb-rbac-pass.found { border-color:#a98048; box-shadow:0 2px 0 #9a7848,0 0 0 3px #ffe4a0; }
.hb-rbac-pass.hit { border-color:#4f8a5b; box-shadow:0 2px 0 #4f8a5b,0 0 0 3px #c5e9b4; }
.hb-rbac-pass.miss { border-color:#c76750; box-shadow:0 2px 0 #b76a55,0 0 0 3px #f8e1da; }
.hb-rbac-pass.skip { opacity:.5; }
/* The stamp. */
.hb-rbac-stamp { display:grid; place-items:center; align-content:center; width:92px; height:92px; border-radius:50%; border:4px double #8aa9a2; color:#7b958d; text-align:center; transform:rotate(-12deg); background:#fffcf0aa; }
.hb-rbac-stamp b { font:900 17px var(--mono); letter-spacing:.5px; line-height:1.1; }
.hb-rbac-stamp small { font:800 9.5px var(--mono); letter-spacing:.5px; }
.hb-rbac-stamp.ok { border-color:#3f7656; color:#2d694b; background:#dff2d6cc; animation:hb-rbac-stamp .35s cubic-bezier(.2,.8,.3,1.3) both; }
.hb-rbac-stamp.bad { border-color:#9c3d2d; color:#9c3d2d; background:#f8e1dacc; animation:hb-rbac-stamp .35s cubic-bezier(.2,.8,.3,1.3) both; }
.hb-rbac-stamp.leak { border-color:#b5562f; color:#9c3d2d; background:#ffe2c2cc; animation:hb-rbac-stamp .35s cubic-bezier(.2,.8,.3,1.3) both; }
.hb-rbac-stamp.leak small { color:#b5562f; }
.hb-rbac-stamp.idle { border-style:dashed; opacity:.6; }
.hb-rbac-stamp.idle b { font-size:24px; }

/* The permission grid. */
.hb-rbac-grid { display:grid; grid-template-columns:max-content repeat(var(--cols),minmax(34px,1fr)); gap:5px; align-items:stretch; }
.hb-rbac-legend { margin:12px 2px 0; font:600 11.5px/1.6 var(--sans); color:#5a6f6c; }
.hb-rbac-corner,.hb-rbac-colhead { display:flex; align-items:flex-end; justify-content:center; text-align:center; padding:0 2px 3px; font:800 10.5px/1.25 var(--mono); color:#355e65; overflow-wrap:anywhere; }
.hb-rbac-corner { justify-content:flex-start; text-align:left; font:700 10px var(--sans); color:#6a7a74; }
.hb-rbac-rowhead { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:2px; min-width:0; padding:4px 6px; border-radius:9px; background:#f3ead0; }
.hb-rbac-rowhead b { font:800 12px var(--mono); color:#2f4f4c; overflow-wrap:anywhere; }
.hb-rbac-rowhead .hb-chip { font-size:9px; padding:0 5px; }
.hb-rbac-cell { min-height:40px; min-width:0; border:2px solid #8aa9a2; border-radius:10px; background:#f3f7ec; box-shadow:0 3px 0 #8aa9a2,inset 0 2px 0 #fff9; cursor:pointer; font:900 16px var(--sans); color:#5c4420; transition:transform .15s; }
.hb-rbac-cell:hover { transform:translateY(-2px); }
.hb-rbac-cell.on { background:#ffe4a0; border-color:#a98048; box-shadow:0 3px 0 #9a7848,inset 0 2px 0 #fff5cf; }
.hb-rbac-cell.na { display:grid; place-items:center; border:1.5px dashed #d0c6a6; background:transparent; box-shadow:none; cursor:default; color:#b9ae8c; font-size:13px; }
.hb-rbac-cell.na:hover { transform:none; }

/* Where the access reaches: namespaces as docks, resources as berths. */
.hb-rbac-map { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:10px; }
.hb-rbac-ns { min-width:0; border:2px dashed #6f9ea0; border-radius:16px; padding:8px 9px 10px; background:#e4f6f04d; }
.hb-rbac-ns>header { margin:0 3px 8px; font:800 12px var(--mono); color:#2b5a66; }
.hb-rbac-ns.cluster { border-style:solid; border-color:#7a5a2f; background:#f3ead07a; }
.hb-rbac-ns.cluster>header { color:#6b4d2a; }
.hb-rbac-ns-body { display:grid; gap:6px; }
.hb-rbac-res { display:flex; align-items:center; justify-content:space-between; gap:6px; min-width:0; padding:5px 9px; border:2px solid #c4cbc0; border-radius:10px; background:#eef0ea; color:#6a7a74; transition:box-shadow .25s; }
.hb-rbac-res b { font:800 11.5px var(--mono); overflow-wrap:anywhere; }
.hb-rbac-res small { font:700 10px var(--sans); white-space:nowrap; }
.hb-rbac-res.r { border-color:#6aa274; background:#dff2d6; color:#2d694b; }
.hb-rbac-res.rw { border-color:#b8964f; background:#ffe9b0; color:#5d4720; }
.hb-rbac-res.go { box-shadow:0 0 0 4px #c5e9b4; }
.hb-rbac-res.stop { box-shadow:0 0 0 4px #f8e1da; border-color:#c76750; animation:st-shake .45s; }

/* Pods and the tokens they carry. */
.hb-rbac-pods { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); gap:10px; }
.hb-rbac-pod { display:flex; align-items:center; gap:7px; min-width:0; padding:7px 9px 7px 5px; border:2px solid #b59c61; border-radius:12px; background:#fff7d8; box-shadow:0 3px 0 #ab905b; }
.hb-rbac-pod>svg { width:30px; height:34px; flex-shrink:0; }
.hb-rbac-pod>div { display:grid; gap:3px; min-width:0; }
.hb-rbac-pod b { font:800 12px var(--mono); color:#3f4a38; }
.hb-rbac-pod b small { font:600 10px var(--sans); color:#6b7159; }
.hb-rbac-pod .hb-chip { font-size:9.5px; padding:0 5px; }
.hb-rbac-pod.fresh { border-style:dashed; }
.hb-rbac-pod.on { border-color:#a98048; box-shadow:0 3px 0 #9a7848,0 0 0 4px #ffe4a0; }
.hb-rbac-token { display:inline-flex; align-items:center; gap:3px; font:700 10px var(--mono); color:#4a675e; }
.hb-rbac-token .hb-rbac-icon { width:15px; height:15px; }
.hb-rbac-token.hot { color:#9c3d2d; }

/* Commands: what must work and what must be blocked. */
.hb-rbac-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:4px 16px; }
.hb-rbac-col { min-width:0; }
.hb-rbac-cmds { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.hb-rbac-cmd { min-width:0; padding:9px 11px 10px; border:2px solid #b8a576; border-radius:14px; background:linear-gradient(#fffbea,#f8efd2); box-shadow:0 3px 0 #b39a62; display:grid; gap:7px; }
.hb-rbac-cmd.go { border-color:#a98048; box-shadow:0 3px 0 #9a7848,0 0 0 4px #ffe4a088; }
.hb-rbac-cmd.match { border-color:#8cb497; box-shadow:0 3px 0 #82a696; }
.hb-rbac-cmd.miss { border-color:#c38a7c; box-shadow:0 3px 0 #b76a55; background:linear-gradient(#fff6f0,#f8e6dc); }
.hb-rbac-cmd-head { display:flex; flex-wrap:wrap; align-items:center; gap:5px 7px; }
.hb-rbac-cmd-head>b { font:700 11.5px var(--sans); color:#355e65; }
.hb-rbac-expect,.hb-rbac-result { padding:1px 7px; border-radius:7px; font:700 10.5px var(--mono); white-space:nowrap; }
.hb-rbac-verdict { display:inline-flex; flex-wrap:nowrap; align-items:center; gap:5px; margin-left:auto; }
.hb-rbac-expect { border:1.5px dashed #9fb4a6; color:#4a675e; background:#f3f7ec; }
.hb-rbac-result.works { border:1.5px solid #6aa274; background:#dff2d6; color:#2d694b; }
.hb-rbac-result.stop { border:1.5px solid #c38a7c; background:#f8e1da; color:#9c3d2d; }
.hb-rbac-mark { flex-shrink:0; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font:800 12px var(--sans); color:#fff; background:#5c9a68; box-shadow:0 2px 0 #3f7656; }
.hb-rbac-mark.bad { background:#c76750; box-shadow:0 2px 0 #8f4f36; }
.hb-rbac-line { display:block; font:800 12px/1.5 var(--mono); color:#2f4f4c; overflow-wrap:anywhere; }
.hb-rbac-reqs { list-style:none; margin:0; padding:0 0 0 10px; display:grid; gap:5px; border-left:3px dotted #c8bd99; }
.hb-rbac-req { display:flex; align-items:center; gap:6px; min-width:0; animation:hb-frame-in .3s ease-out both; }
.hb-rbac-req .hb-rbac-ticket { padding:2px 8px 2px 3px; box-shadow:0 2px 0 #ab905b; }
.hb-rbac-req .hb-rbac-ticket>svg.hb-cube { width:18px; height:20px; }
.hb-rbac-req .hb-rbac-ticket code { font-size:10.5px; }
.hb-rbac-req.idle { animation:none; }
.hb-rbac-req.idle .hb-rbac-ticket { box-shadow:none; }
.hb-rbac-req-stamp { flex-shrink:0; min-width:26px; padding:0 5px; border-radius:6px; text-align:center; font:900 10.5px/18px var(--mono); transform:rotate(-6deg); }
.hb-rbac-req.allow .hb-rbac-req-stamp { border:2px solid #3f7656; color:#2d694b; background:#dff2d6; }
.hb-rbac-req.deny .hb-rbac-req-stamp { border:2px solid #9c3d2d; color:#9c3d2d; background:#f8e1da; }
.hb-rbac-req.deny .hb-rbac-ticket { border-color:#c76750; }
.hb-rbac-req.leak .hb-rbac-req-stamp { border:2px solid #b5562f; color:#9c3d2d; background:#ffe2c2; }
.hb-rbac-req.leak .hb-rbac-ticket { border-color:#c76750; }
.hb-rbac-hint { font:600 11px var(--sans); color:#6b7159; }
.hb-rbac-detail { display:block; padding:5px 8px; border-radius:8px; background:#fffcf0; border:1.5px dashed #d8c9a0; font:600 10.5px/1.5 var(--mono); color:#6b4d2a; overflow-wrap:anywhere; }
.hb-rbac-cmd.miss .hb-rbac-detail { color:#8b3f30; }
.hb-rbac-harm { font:700 11px/1.5 var(--sans); color:#9c3d2d; }
.hb-rbac .hb-log li { overflow-wrap:anywhere; }
/* The single-choice stages: controls stay compact beside a long YAML preview. */
.hb-rbac .hb-panels { align-items:start; }
.hb-rbac .hb-yaml { max-height:380px; overflow:auto; }

/* Demos: the same pieces, shrunk into the porthole. */
.hb-rbac-demo { gap:8px; }
.hb-rbac-pair { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px; }
.hb-rbac-pair .hb-rbac-icon { width:16px; height:16px; }
.hb-rbac-pair .hb-chip { font-size:9px; padding:0 5px; }
.hb-rbac-gate.mini { grid-template-columns:1fr; gap:6px; padding:8px; border-width:2px; border-radius:14px; box-shadow:0 3px 0 #567979; justify-items:center; }
.hb-rbac-gate.mini .hb-rbac-arrive { align-items:center; gap:3px; }
.hb-rbac-gate.mini .hb-rbac-arrow { padding:0; font-size:13px; }
.hb-rbac-gate.mini .hb-rbac-ticket { padding:2px 7px 2px 3px; border-width:1.5px; box-shadow:0 2px 0 #ab905b; }
.hb-rbac-gate.mini .hb-rbac-ticket>svg.hb-cube { width:17px; height:19px; }
.hb-rbac-gate.mini .hb-rbac-ticket code { font-size:9.5px; }
.hb-rbac-gate.mini .hb-rbac-ticket .hb-chip { display:none; }
.hb-rbac-gate.mini .hb-rbac-house { width:100%; padding:5px 6px 6px; border-width:1.5px; border-top-width:5px; box-shadow:0 2px 0 #7a5a2f; }
.hb-rbac-gate.mini .hb-rbac-house::before { top:-12px; height:7px; border-width:1.5px; }
.hb-rbac-gate.mini .hb-rbac-house>header { margin-bottom:4px; }
.hb-rbac-gate.mini .hb-rbac-house>header b { font-size:9.5px; }
.hb-rbac-gate.mini .hb-rbac-house .hb-rbac-icon { width:14px; height:14px; }
.hb-rbac-gate.mini .hb-rbac-pass { padding:3px 5px; border-width:1.5px; }
.hb-rbac-gate.mini .hb-rbac-pass-head b,.hb-rbac-gate.mini .hb-rbac-pass-row b { font-size:9.5px; }
.hb-rbac-gate.mini .hb-rbac-pass-row { margin-top:1px; }
.hb-rbac-gate.mini .hb-chip { font-size:8.5px; padding:0 4px; }
.hb-rbac-gate.mini .hb-rbac-rules li { font-size:9.5px; padding:1px 4px; }
.hb-rbac-gate.mini .hb-rbac-why { font-size:9.5px; margin-top:2px; }
.hb-rbac-gate.mini .hb-rbac-stamp { width:58px; height:58px; border-width:3px; }
.hb-rbac-gate.mini .hb-rbac-stamp b { font-size:12px; }
.hb-rbac-gate.mini .hb-rbac-stamp small { font-size:8.5px; }
.hb-rbac-gate.mini .hb-rbac-badge.small b { font-size:9.5px; }
.hb-rbac-map.mini { grid-template-columns:repeat(auto-fit,minmax(58px,1fr)); gap:5px; }
.hb-rbac-map.mini .hb-rbac-ns { padding:4px 4px 5px; border-width:1.5px; border-radius:10px; }
.hb-rbac-map.mini .hb-rbac-ns>header { margin:0 2px 4px; font-size:9.5px; }
.hb-rbac-map.mini .hb-rbac-ns-body { gap:3px; }
.hb-rbac-map.mini .hb-rbac-res { flex-direction:column; align-items:flex-start; gap:0; padding:2px 4px; border-width:1.5px; border-radius:6px; }
.hb-rbac-map.mini .hb-rbac-res b { font-size:9.5px; overflow-wrap:normal; }
.hb-rbac-map.mini .hb-rbac-ns>header { overflow-wrap:normal; white-space:nowrap; }
.hb-rbac-map.mini .hb-rbac-res small { font-size:8.5px; }
.hb-rbac-demo .hb-rbac-pods { grid-template-columns:1fr; gap:6px; }
.hb-rbac-demo .hb-rbac-pod { padding:3px 7px 3px 3px; border-width:1.5px; box-shadow:0 2px 0 #ab905b; }
.hb-rbac-demo .hb-rbac-pod>svg { width:22px; height:25px; }
.hb-rbac-demo .hb-rbac-pod b { font-size:10.5px; }
.hb-rbac-demo .hb-rbac-pod .hb-chip { font-size:8.5px; }
.hb-rbac-demo .hb-rbac-token { font-size:9.5px; }
.hb-rbac-demo .hb-rbac-token .hb-rbac-icon { width:12px; height:12px; }

@keyframes hb-rbac-arrive { from { opacity:0; transform:translateX(-14px); } to { opacity:1; transform:none; } }
@keyframes hb-rbac-stamp { 0% { opacity:0; transform:rotate(-12deg) scale(1.6); } 100% { opacity:1; transform:rotate(-12deg) scale(1); } }

@media(max-width:800px) {
  .hb-rbac-gate { grid-template-columns:minmax(0,1fr) auto; }
  .hb-rbac-house { grid-column:1 / -1; grid-row:2; }
  .hb-rbac-arrive { flex-direction:row; flex-wrap:wrap; align-items:center; }
  .hb-rbac-arrow { padding:0; }
  .hb-rbac-stamp { width:72px; height:72px; }
  .hb-rbac-stamp b { font-size:14px; }
}
@media(max-width:440px) {
  .hb-rbac-gate { padding:10px; gap:10px; }
  .hb-rbac-stamp { width:62px; height:62px; border-width:3px; }
  .hb-rbac-stamp b { font-size:12px; }
  .hb-rbac-grid { grid-template-columns:max-content repeat(var(--cols),minmax(30px,1fr)); gap:4px; }
  .hb-rbac-colhead { font-size:9px; }
  .hb-rbac-rowhead { padding:3px 4px; }
  .hb-rbac-rowhead b { font-size:10.5px; }
  .hb-rbac-cell { min-height:36px; }
  .hb-rbac-cmd { padding:8px 9px; }
  .hb-rbac-line { font-size:11px; }
  .hb-rbac-verdict { margin-left:0; }
  /* The demo porthole is ~145px wide on a phone: give the text the room instead of the padding. */
  .hb-rbac-gate.mini { padding:6px 4px; }
  .hb-rbac-gate.mini .hb-rbac-house { padding:4px 4px 5px; }
  .hb-rbac-gate.mini .hb-rbac-pass { padding:3px 3px; }
  .hb-rbac-gate.mini .hb-rbac-pass-row { padding-left:2px; }
  .hb-rbac-gate.mini .hb-rbac-rules li { padding:1px 3px; }
  .hb-rbac-gate.mini .hb-rbac-house>header .hb-rbac-icon { display:none; }
}