/* CanvasBowtie: the Extended and Custom bow-ties' own drawing ("the canvas"). Mockup code.
   Colours are the app's own (brand.ts): navy #1E3A5F and gold #D69E2E for chrome; the classic bow-tie set
   (blue causes, red top event, striped hazards); the three control-class colours of the workshop bow-tie. */
.cb { position: relative; width: 100%; height: 100%; outline: none; font-family: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif; color: #1E293B; line-height: 1.3;
      --cb-cause: #3B82F6; --cb-cause-l: #A9C8F8; --cb-out: #E53E3E; --cb-out-l: #F4AEAE; --cb-top: #E53E3E; --cb-top-glow: rgba(229,62,62,.09);
      --cb-elim: #9A3412; --cb-eng: #0F766E; --cb-admin: #1D4ED8; --cb-none: #64748B; }
.cb.skin-safeforge { --cb-cause: #E8874A; --cb-cause-l: #F5C7A6; --cb-top: #D69E2E; --cb-top-glow: rgba(214,158,46,.12); }
.cb-vp { position: absolute; inset: 0; overflow: hidden; background-color: #F7FAFC; background-image: radial-gradient(circle, #C7D2E0 1px, transparent 1.5px); cursor: grab; user-select: none; }
.cb-vp.panning { cursor: grabbing; }
.cb-static .cb-vp { cursor: default; background-image: none; background-color: transparent; }
.cb-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.cb-lines { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.cb-cards, .cb-labels { position: absolute; left: 0; top: 0; }

/* lines: smooth curves, blue toward the key risk and red away from it, passing through the control cards */
.cb-line { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.cb-line.in { stroke: var(--cb-cause-l); }
.cb-line.out, .cb-line.stem { stroke: var(--cb-out-l); }
.cb-line.general { stroke: #94A3B8; stroke-dasharray: 7 5; stroke-width: 2.5; }
.cb-line.ef { stroke: #E0A526; stroke-width: 2.5; }
.cb-line.box { stroke: #1A202C; stroke-width: 2; }
.cb-line.dim { opacity: .16; }
.cb-hit { fill: none; stroke: transparent; stroke-width: 24; pointer-events: stroke; }
.cb-hit.cb-drop { stroke: rgba(214,158,46,.6); }

/* everything is a card */
.cb-card { position: absolute; left: 0; top: 0; z-index: 1; transform-origin: 0 0; box-sizing: border-box; background: #fff; border: 1px solid #CBD5E1; border-radius: 10px;
           box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.07); cursor: pointer; }
.cb-card.sel { box-shadow: 0 0 0 3px #D69E2E, 0 8px 20px rgba(15,23,42,.18); z-index: 3; }
.cb-card.dim { opacity: .18; }
.cb-card.hl { box-shadow: 0 0 0 3px #D69E2E, 0 0 0 9px rgba(214,158,46,.28); }
.cb-top { display: flex; align-items: center; gap: 5px; height: 16px; white-space: nowrap; overflow: hidden; }
.cb-id { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; font-weight: 600; background: #EEF2F7; color: #334155; border-radius: 4px; padding: 1px 5px; white-space: nowrap; flex-shrink: 0; }
.cb-name { font-size: 12.5px; line-height: 15px; color: #1E293B; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cb-ph { color: #94A3B8; }
.cb-mk { font-size: 9.5px; font-weight: 700; border-radius: 4px; padding: 0 5px; line-height: 14px; white-space: nowrap; flex-shrink: 0; }
.cb-mk.src { color: #1E3A5F; background: #fff; border: 1px solid #1E3A5F; }
.cb-mk.new { color: #475569; background: #F8FAFC; border: 1px dashed #64748B; }
.cb-mk.mock { color: #BE185D; background: #FDF2F8; border: 1px dashed #BE185D; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 400; position: absolute; top: -9px; left: 22px; }   /* hangs on the card's top edge: it is not the app's */
.cb-x { position: absolute; right: -9px; top: -9px; min-width: 20px; height: 17px; border-radius: 9px; background: #D69E2E; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; line-height: 1; box-shadow: 0 0 0 2px #fff; }

/* a cause: a blue bar on its left edge */
.cb-cause { padding: 6px 10px 6px 17px; }
.cb-cause > .cb-bar { position: absolute; left: -1px; top: -1px; bottom: -1px; width: 8px; border-radius: 10px 0 0 10px; background: var(--cb-cause); }

/* a hazard and a sub-hazard: the striped edge, the ratings, the fold toggle */
.cb-hazard, .cb-subhazard { padding: 8px 12px 8px 26px; border-color: #B7791F; }
.cb-hazard > .cb-bar, .cb-subhazard > .cb-bar { position: absolute; left: -1px; top: -1px; bottom: -1px; width: 16px; border-radius: 10px 0 0 10px; background: repeating-linear-gradient(45deg, #D69E2E 0 6px, #1A202C 6px 12px); }
.skin-safeforge .cb-hazard > .cb-bar, .skin-safeforge .cb-subhazard > .cb-bar { background: #D69E2E; }
.cb-hazard .cb-name, .cb-subhazard .cb-name { font-size: 13.5px; line-height: 16px; font-weight: 600; color: #1E3A5F; margin-top: 6px; }
.cb-rt { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: 4px; border: 1px solid #94A3B8; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #7C2D12; white-space: nowrap; flex-shrink: 0; }
.cb-rt.none { border-style: dashed; color: #64748B; text-transform: none; font-weight: 600; }
.cb-ar { color: #94A3B8; font-size: 11px; flex-shrink: 0; }
.cb-fold { position: absolute; right: -10px; top: -10px; width: 21px; height: 21px; border-radius: 50%; background: #fff; border: 1.5px solid #64748B; color: #334155; display: grid; place-items: center; font-size: 15px; font-weight: 700; line-height: 1; z-index: 4; }
.cb-fold:hover { border-color: #1E3A5F; background: #F1F5F9; }
.cb-count { border: 1.5px solid #64748B; border-radius: 15px; box-shadow: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #334155; white-space: nowrap; }
.cb-count:hover { background: #F1F5F9; }

/* a hazard that IS the key risk at one place: a slim striped heading inside the spine, where its lane meets the key risk */
.cb-hazard.through { padding: 6px 12px 6px 26px; border-width: 1.5px; box-shadow: 0 1px 2px rgba(15,23,42,.10), 0 3px 10px rgba(15,23,42,.12); }
.cb-hazard.through .cb-name { margin-top: 4px; line-height: 17px; }
.cb-hazard.through.sel { box-shadow: 0 0 0 3px #D69E2E, 0 8px 20px rgba(15,23,42,.18); }
/* a hazard that also sits under another key risk says so on its lower edge */
.cb-also { position: absolute; left: 22px; bottom: -9px; z-index: 2; box-sizing: border-box; max-width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; font-weight: 700; line-height: 14px; padding: 0 6px; border-radius: 4px; white-space: nowrap; color: #475569; background: #F1F5F9; border: 1px solid #94A3B8; }

/* "On the hazard, not on a cause": a dashed outlined card in the cause column */
.cb-general { border: 1.5px dashed #94A3B8; background: #F8FAFC; box-shadow: none; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; font-weight: 600; color: #64748B; cursor: default; }

/* an outcome: red-edged */
.cb-outcome { padding: 7px 19px 7px 12px; }
.cb-outcome > .cb-bar { position: absolute; right: -1px; top: -1px; bottom: -1px; width: 8px; border-radius: 0 10px 10px 0; background: var(--cb-out); }
.cb-outcome .cb-name { margin-top: 1px; }
.cb-rec { font-size: 10.5px; color: #64748B; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-rec .cb-id { font-size: 10px; }

/* the key risk: a red top-event node with the striped KEY RISK box above it */
.cb-kr { background: var(--cb-top); border: 0; border-radius: 18px; display: grid; place-items: center; text-align: center; padding: 0 14px; box-shadow: 0 0 0 12px var(--cb-top-glow), 0 6px 18px rgba(15,23,42,.2); }
.cb-kr .cb-name { color: #fff; font-size: 16px; line-height: 19px; font-weight: 700; margin: 0; }
/* ...and, when hazards are drawn through it, a spine: as tall as the lanes, with its name in a cap; the headings of those hazards sit inside it */
.cb-kr.spine { z-index: 0; display: block; padding: 0; background: var(--cb-top-glow); border: 2.5px solid var(--cb-top); border-radius: 20px; box-shadow: none; cursor: default; }
.cb-edit .cb-kr.spine { cursor: default; }
.cb-kr.spine.sel { box-shadow: 0 0 0 3px #D69E2E; z-index: 0; }
.cb-cap { position: absolute; left: -2.5px; right: -2.5px; top: -2.5px; height: 42px; border-radius: 18px 18px 0 0; background: var(--cb-top); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; }
.cb-cap .cb-kno { background: #fff; color: #1E3A5F; vertical-align: 0; margin: 0; }
.cb-krbox { border: 0; border-radius: 7px; padding: 9px; background: repeating-linear-gradient(45deg, #D69E2E 0 7px, #1A202C 7px 14px); }
.skin-safeforge .cb-krbox { background: #D69E2E; padding: 3px; }
.cb-in0 { background: #fff; border-radius: 3px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; padding: 6px 14px; overflow: hidden; }
.cb-kk { font-size: 12px; font-weight: 700; letter-spacing: .18em; color: #B45309; }
.cb-kt { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 18px; line-height: 22px; color: #1E3A5F; }
.cb-kno { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; background: #1E3A5F; color: #fff; border-radius: 4px; padding: 1px 6px; vertical-align: 3px; margin-right: 7px; }
.cb-kd { font-size: 12.5px; line-height: 15.5px; color: #334155; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cb-ko { font-size: 11px; color: #64748B; }
.cb-kn { font-size: 11.5px; font-weight: 700; border: 1.5px dashed #94A3B8; border-radius: 999px; padding: 1px 12px; color: #475569; margin-top: 2px; }

/* a control: a card hung on its line. A colour bar across the top for its class. Its outline says how far along it is:
   in a project by its stage (dashed = draft, solid = adopted, solid with a filled corner tick = implemented, struck through = rejected);
   with no project, solid = in place and dashed = not in place */
.cb-control { border: 1.5px solid var(--k); padding: 12px 9px 6px; }
.cb-control.elim, .cb-efctl.elim { --k: var(--cb-elim); }
.cb-control.eng, .cb-efctl.eng { --k: var(--cb-eng); }
.cb-control.admin, .cb-efctl.admin { --k: var(--cb-admin); }
.cb-control.none, .cb-efctl.none { --k: var(--cb-none); }
.cb-control.no, .cb-efctl.no, .cb-control.stg-draft, .cb-efctl.stg-draft { border-style: dashed; }
.cb-control > .cb-cbar { position: absolute; left: -1.5px; right: -1.5px; top: -1.5px; height: 7px; border-radius: 10px 10px 0 0; background: var(--k); }
.cb-control.no > .cb-cbar, .cb-control.stg-draft > .cb-cbar { opacity: .55; }
.cb-control.stg-implemented::after, .cb-efctl.stg-implemented::after { content: '✓'; position: absolute; right: -1.5px; bottom: -1.5px; width: 20px; height: 17px; border-radius: 9px 0 8.5px 0; background: var(--k); color: #fff; font-size: 11px; font-weight: 800; line-height: 17px; text-align: center; }
.cb-control.stg-rejected, .cb-efctl.stg-rejected { --k: #94A3B8; background: #F8FAFC; box-shadow: none; }
.cb-control.stg-rejected .cb-name, .cb-control.stg-rejected .cb-id, .cb-efctl.stg-rejected .cb-name { text-decoration: line-through; color: #64748B; }
/* waiting in a change request: dashed gold, with the change request's number on the top edge */
.cb-control.pend { --k: #D69E2E; background: #FFFBEB; border-style: dashed; border-width: 2px; }
.cb-control .cb-name { font-size: 11.5px; line-height: 14px; margin-top: 3px; }
.cb-note { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; color: #64748B; white-space: nowrap; }
.cb-under { font-size: 10px; color: #64748B; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* how well a control works (a bow-tie of a system in service): three pips */
.cb-works { position: absolute; right: 7px; bottom: 5px; display: inline-flex; gap: 2px; }
.cb-works i { width: 9px; height: 5px; border-radius: 2px; background: #CBD5E1; }
.cb-works[data-w="3"] i { background: #0F766E; }
.cb-works[data-w="2"] i:nth-child(-n+2) { background: #D97706; }
.cb-works[data-w="1"] i:nth-child(1) { background: #9A3412; }
/* the folded escalation factors: a small yellow count on the control's lower edge */
.cb-efn { position: absolute; left: -8px; bottom: -14px; min-width: 23px; height: 21px; box-sizing: border-box; border-radius: 11px; background: #FBBF24; border: 1.5px solid #B45309; color: #78350F; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 0 6px; z-index: 4; box-shadow: 0 0 0 2px #fff; }
.cb-efn::after { content: ''; border: 4px solid transparent; border-top-color: #78350F; margin-top: 4px; }
.cb-efn.open::after { border-top-color: transparent; border-bottom-color: #78350F; margin-top: -4px; }
.cb-efn:hover { background: #F59E0B; }

/* an escalation factor: a yellow card hung under its control; its own controls are small cards on the elbow line */
.cb-ef { background: #FEF3C7; border: 1.5px solid #D97706; border-radius: 8px; padding: 5px 9px; box-shadow: 0 1px 3px rgba(15,23,42,.10); }
.cb-ef .cb-id { background: #FDE68A; color: #78350F; }
.cb-ef .cb-name { font-size: 11.5px; line-height: 14px; margin-top: 3px; color: #451A03; }
.cb-ek { font-size: 9.5px; color: #92400E; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.cb-efctl { border: 1.5px solid var(--k); border-radius: 7px; padding: 4px 8px 4px 14px; box-shadow: none; overflow: visible; }
.cb-efctl > .cb-bar { position: absolute; left: -1.5px; top: -1.5px; bottom: -1.5px; width: 7px; border-radius: 7px 0 0 7px; background: var(--k); }
.cb-efctl .cb-name { margin: 0; font-size: 11px; line-height: 14.5px; }
.cb-efctl .cb-id { font-size: 9.5px; margin-right: 5px; }

/* marks that hang on a card's top edge, so a narrow card keeps its ID and name:
   changed in the log since · drafted, not yet confirmed · waiting in a change request · new since the last update · no longer in the log */
.cb-mk.chg, .cb-mk.drf, .cb-mk.pend, .cb-mk.fresh, .cb-mk.gone { position: absolute; top: -9px; left: 14px; z-index: 2; }
.cb-mk.chg { color: #86198F; background: #FAE8FF; border: 1px solid #E879F9; }
.cb-mk.drf { color: #4C1D95; background: #EDE9FE; border: 1px dashed #7C3AED; }
.cb-mk.pend { color: #92400E; background: #FEF3C7; border: 1px solid #D69E2E; }
.cb-mk.fresh { color: #115E59; background: #CCFBF1; border: 1px solid #5EEAD4; }
.cb-mk.gone { color: #475569; background: #F1F5F9; border: 1px dashed #64748B; }
.cb-efctl > .cb-mk { position: absolute; left: auto; right: 4px; top: -11px; line-height: 13px; }

/* the title of each hazard and sub-hazard, in a column at the far left of its rows. Its type is set from the zoom, so it stays readable when the picture is far away */
.cb-lane { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; cursor: pointer; }
.cb-lt { min-width: 0; max-width: 100%; text-align: right; font-weight: 700; color: #1E3A5F; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; border-right: .32em solid #D69E2E; padding-right: .5em; }
.cb-lane.sub .cb-lt { font-weight: 600; color: #475569; border-right-color: #CBD5E1; }
.cb-lid { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .86em; color: #B45309; margin-right: .5em; }
.cb-lane:hover .cb-lt { text-decoration: underline; }
.cb-lane.dim { opacity: .2; }

/* far away (below 62%): a card shows its ID large and drops its name */
.cb-far .cb-cause .cb-name, .cb-far .cb-control .cb-name, .cb-far .cb-ef .cb-name, .cb-far .cb-hazard .cb-name, .cb-far .cb-subhazard .cb-name,
.cb-far .cb-rec, .cb-far .cb-under, .cb-far .cb-ek, .cb-far .cb-kd, .cb-far .cb-ko, .cb-far .cb-note, .cb-far .cb-works, .cb-far .cb-grp, .cb-far .cb-tagk { display: none; }
/* far away a mark is a dot on the card's top edge: navy = from the log, dashed = not in the log, amber = waiting, magenta = mockup */
.cb-far .cb-mk { position: absolute; top: -8px; left: 12px; width: 17px; height: 17px; box-sizing: border-box; padding: 0; border-radius: 50%; font-size: 0; line-height: 0; box-shadow: 0 0 0 2px #fff; }
.cb-far .cb-mk.src { background: #1E3A5F; border: 0; }
.cb-far .cb-mk.new { background: #fff; border: 2.5px dashed #64748B; }
.cb-far .cb-mk.chg, .cb-far .cb-mk.drf, .cb-far .cb-mk.pend, .cb-far .cb-mk.fresh, .cb-far .cb-mk.gone, .cb-far .cb-mk.mock { border: 0; left: 36px; }
.cb-far .cb-mk.chg { background: #C026D3; }
.cb-far .cb-mk.drf { background: #7C3AED; }
.cb-far .cb-mk.pend { background: #D69E2E; }
.cb-far .cb-mk.fresh { background: #0F766E; }
.cb-far .cb-mk.gone { background: #94A3B8; }
.cb-far .cb-mk.mock { background: #BE185D; }
.cb-far .cb-also { width: 17px; height: 17px; padding: 0; border-radius: 50%; font-size: 0; background: #94A3B8; border: 0; box-shadow: 0 0 0 2px #fff; bottom: -8px; }
.cb-far .cb-top { height: 100%; justify-content: center; gap: 9px; }
.cb-far .cb-id { font-size: 24px; background: none; padding: 0; font-weight: 700; color: #1E293B; }
.cb-far .cb-efctl .cb-name { font-size: 0; display: flex; align-items: center; justify-content: center; height: 100%; }
.cb-far .cb-efctl .cb-id { font-size: 17px; margin: 0; }
.cb-far .cb-efctl > .cb-mk { top: -8px; line-height: 0; }
.cb-far .cb-hazard .cb-top, .cb-far .cb-subhazard .cb-top { justify-content: flex-start; }
.cb-far .cb-rt { height: 24px; font-size: 14px; padding: 0 7px; }
.cb-far .cb-ar { font-size: 16px; }
.cb-far .cb-outcome .cb-name { font-size: 18px; line-height: 21px; }
.cb-far .cb-outcome .cb-top { height: 0; }
.cb-far .cb-card.noid .cb-name { display: -webkit-box; font-size: 17px; line-height: 20px; }
.cb-far .cb-card.noid .cb-top { display: block; height: 0; overflow: visible; }      /* a card with no ID still shows its marks as dots */
.cb-far .cb-general { font-size: 16px; }
.cb-far .cb-kr .cb-name { font-size: 26px; line-height: 30px; display: block; }
.cb-far .cb-cap { height: 48px; }
.cb-far .cb-cap .cb-kno { font-size: 18px; }
.cb-far .cb-kk { font-size: 19px; }
.cb-far .cb-kt { font-size: 36px; line-height: 42px; }
.cb-far .cb-kno { font-size: 20px; vertical-align: 6px; }
.cb-far .cb-kn { font-size: 18px; }
.cb-far .cb-x { font-size: 15px; height: 24px; min-width: 28px; border-radius: 12px; right: -12px; top: -12px; }
.cb-far .cb-efn { font-size: 15px; height: 26px; border-radius: 13px; bottom: -15px; left: -10px; }
.cb-far .cb-control.stg-implemented::after { width: 30px; height: 24px; font-size: 16px; line-height: 24px; }
.cb-far .cb-control.stg-rejected .cb-id { color: #94A3B8; }

/* the detail beside the selected card (the page supplies its words and may style it with options.detailClass) */
.cb-detail { position: absolute; z-index: 20; width: 344px; max-height: calc(100% - 16px); overflow-y: auto; display: none; box-sizing: border-box; background: #FFFDF7; border: 1px solid #E7D9A8; border-top: 3px solid #D69E2E; border-radius: 0 0 10px 10px;
             box-shadow: 0 14px 34px rgba(15,23,42,.30); padding: 9px 12px 11px; font-size: 12.5px; cursor: default; user-select: text; }
/* the bar above the selection: what can be done with it (the page supplies the buttons) */
.cb-selbar { position: absolute; z-index: 22; display: none; align-items: center; gap: 2px; box-sizing: border-box; background: #1E3A5F; color: #fff; border-radius: 8px; padding: 3px 4px; box-shadow: 0 6px 18px rgba(15,23,42,.35); font-size: 12px; white-space: nowrap; cursor: default; user-select: none; }
/* a hazard that also sits under another key risk: when it is selected, that key risk is named in a grey card at the canvas's edge, with a faint line to it */
.cb-dock { position: absolute; z-index: 14; display: none; max-width: 240px; box-sizing: border-box; background: #F1F5F9; border: 1.5px solid #94A3B8; border-radius: 8px; padding: 6px 10px 7px; font-size: 12px; line-height: 1.3; color: #475569; cursor: pointer; box-shadow: 0 2px 8px rgba(15,23,42,.14); }
.cb-dock:hover { background: #E2E8F0; }
.cb-dock b { color: #334155; font-weight: 700; margin-left: 5px; }
.cb-dock i { display: block; font-style: normal; font-size: 11px; color: #64748B; margin-top: 2px; }
.cb-dock .cb-id { background: #64748B; color: #fff; }
.cb-dockline { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 13; display: none; overflow: visible; pointer-events: none; }
.cb-dockline path { fill: none; stroke: #94A3B8; stroke-width: 1.6; stroke-dasharray: 5 4; opacity: .9; }

/* the map of the whole, with the visible part outlined */
.cb-map { position: absolute; right: 10px; bottom: 10px; z-index: 15; background: rgba(255,255,255,.95); border: 1px solid #CBD5E1; border-radius: 8px; box-shadow: 0 4px 12px rgba(15,23,42,.16); padding: 5px; cursor: pointer; line-height: 0; }
.cb-map rect { fill: #CBD5E1; }
.cb-map .m-cause { fill: var(--cb-cause); opacity: .75; }
.cb-map .m-hazard, .cb-map .m-subhazard { fill: #D69E2E; }
.cb-map .m-kr, .cb-map .m-krbox { fill: var(--cb-top); }
.cb-map .m-spine { fill: var(--cb-top); opacity: .2; }
.cb-map .m-outcome { fill: var(--cb-out); opacity: .7; }
.cb-map .m-control, .cb-map .m-efctl { fill: var(--cb-eng); opacity: .85; }
.cb-map .m-ef { fill: #F59E0B; }
.cb-map .m-bundle { fill: #64748B; }
.cb-map .cb-map-view { fill: rgba(30,58,95,.10); stroke: #1E3A5F; stroke-width: 2; vector-effect: non-scaling-stroke; }

/* editing (a custom bow-tie): + handles to add, drag to move, double-click to rename.
   A handle is coloured by what it adds: blue a cause, grey a control, red a consequence, yellow (under a control) what could defeat it.
   It shows when its card is pointed at AND when its card is selected; "Add" on the rail shows them all. Its label says what it adds. */
.cb-edit .cb-card { cursor: grab; }
.cb-edit .cb-general { cursor: default; }
.cb-edit .cb-card:hover { z-index: 4; }
.cb-edit .cb-kr.spine:hover { z-index: 0; }      /* the spine stays under the headings that sit in it, whatever the pointer is over */
.cb-h { position: absolute; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; display: none; place-items: center; font-size: 16px; font-weight: 700; line-height: 1; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(15,23,42,.4); z-index: 6; cursor: pointer; font-family: system-ui, sans-serif; transform: scale(var(--cb-hs, 1)); }
.cb-edit .cb-card:hover > .cb-h, .cb-edit .cb-card.sel > .cb-h, .cb-edit.cb-reveal .cb-card > .cb-h { display: grid; }
.cb-edit .cb-card.editing > .cb-h, .cb-edit .cb-card.cb-moving > .cb-h, .cb-edit .cb-card.cb-dragging > .cb-h, .cb-edit.cb-multi .cb-card.sel > .cb-h { display: none; }
.cb-h.at-l { left: -12px; top: 50%; margin-top: -11px; }
.cb-h.at-r { right: -12px; top: 50%; margin-top: -11px; }
.cb-h.at-b { bottom: -12px; left: 62%; }
.cb-h.at-t { top: -12px; left: 62%; }
.cb-kr.spine > .cb-h.at-l, .cb-kr.spine > .cb-h.at-r { top: 70px; margin-top: 0; }
.cb-h.h-cause { background: var(--cb-cause); }
.cb-h.h-ctl { background: #64748B; }
.cb-h.h-ef { background: #F59E0B; }
.cb-h.h-out { background: var(--cb-out); }
.cb-h:hover { transform: scale(calc(var(--cb-hs, 1) * 1.15)); z-index: 8; }
.cb-h::after { content: attr(data-tip); position: absolute; left: 50%; bottom: 100%; margin-bottom: 5px; transform: translateX(-50%) scale(var(--cb-ts, 1)); transform-origin: 50% 100%; background: #1E293B; color: #fff; font: 600 11px/1.2 'Source Sans 3', system-ui, sans-serif; padding: 3px 7px; border-radius: 5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .1s; }
.cb-h.at-b::after { bottom: auto; top: 100%; margin: 5px 0 0; transform-origin: 50% 0; }
.cb-h:hover::after { opacity: 1; }
.cb-in { width: 100%; box-sizing: border-box; font: inherit; color: inherit; border: 1px solid #D69E2E; border-radius: 4px; padding: 1px 4px; outline: 2px solid rgba(214,158,46,.35); background: #fff; }
.cb-kr .cb-in { color: #1E293B; font-size: 13px; }
.cb-card.cb-moving { box-shadow: 0 12px 28px rgba(15,23,42,.28); z-index: 9; cursor: grabbing; }
.cb-card.cb-dragging { pointer-events: none; z-index: 9; opacity: .9; box-shadow: 0 12px 28px rgba(15,23,42,.3); }
.cb-card.cb-drop { box-shadow: 0 0 0 3px #D69E2E, 0 0 0 9px rgba(214,158,46,.3); }
/* the empty state: the centre with a button on each side, and a line under it */
.cb-ghost { position: absolute; left: 0; top: 0; z-index: 2; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px dashed #94A3B8; border-radius: 10px; background: rgba(255,255,255,.9); color: #334155; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.cb-ghost.g-cause { border-color: var(--cb-cause); color: #1D4ED8; }
.cb-ghost.g-out { border-color: var(--cb-out); color: #B91C1C; }
.cb-ghost:hover { background: #fff; box-shadow: 0 0 0 3px rgba(214,158,46,.35); }
.cb-ghost.g-cause::after { content: ''; position: absolute; left: 100%; top: 50%; width: 62px; border-top: 2.5px dashed var(--cb-cause-l); }
.cb-ghost.g-out::before { content: ''; position: absolute; right: 100%; top: 50%; width: 62px; border-top: 2.5px dashed var(--cb-out-l); }
.cb-ghint { position: absolute; left: 0; top: 0; text-align: center; font-size: 13.5px; color: #64748B; pointer-events: none; }

/* the lift: a picture becomes a copy */
.cb-lifting .cb-card { box-shadow: 0 10px 26px rgba(15,23,42,.2); }
.cb-lifting .cb-mk.src { animation: cbchip .45s .22s both; }
@keyframes cbchip { from { opacity: 0; transform: scale(.4); } 60% { transform: scale(1.25); } to { opacity: 1; transform: scale(1); } }
/* the snap: a card rings as it lands in its place */
.cb-card.cb-land { animation: cbland .44s ease-out; }
@keyframes cbland { 0% { box-shadow: 0 0 0 calc(var(--cb-ring, 11px) * .2) rgba(214,158,46,.95); } 100% { box-shadow: 0 0 0 var(--cb-ring, 11px) rgba(214,158,46,0); } }
@media print { .cb-map, .cb-h, .cb-fold, .cb-selbar, .cb-dock, .cb-dockline { display: none !important; } }

/* a ring round the cards a count on the page stands for */
.cb-card.ring { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #BE185D, 0 8px 20px rgba(15,23,42,.18); z-index: 2; }
/* while a card is dragged: what a drop here will do, and where on the line it will land */
.cb-dtag { position: absolute; z-index: 30; display: none; pointer-events: none; background: #1E3A5F; color: #fff; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 3px 9px; white-space: nowrap; box-shadow: 0 4px 12px rgba(15,23,42,.3); }
.cb-dtag.no { background: #64748B; }
.cb-dtag.alt { background: #B45309; }
.cb-ins { position: absolute; left: 0; top: 0; width: 4px; border-radius: 2px; background: #D69E2E; display: none; pointer-events: none; z-index: 10; box-shadow: 0 0 0 3px rgba(214,158,46,.3); }
/* a group of causes: one card that lists what it holds */
.cb-cause.group { box-shadow: 4px 4px 0 #BFDBFE, 0 1px 2px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.07); }
.cb-cause.group.sel { box-shadow: 0 0 0 3px #D69E2E, 0 8px 20px rgba(15,23,42,.18); }
.cb-grp { margin-top: 3px; font-size: 10px; color: #475569; white-space: nowrap; overflow: hidden; display: flex; gap: 4px; align-items: center; }
.cb-grp .cb-id { font-size: 9.5px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; font-family: inherit; }
.cb-tagk { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #475569; }
/* a line's controls bundled into a counted group; a click opens it again */
.cb-bundle { border: 1.5px solid var(--k, #64748B); padding: 10px 9px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #F8FAFC; }
.cb-edit .cb-bundle { cursor: pointer; }
.cb-bundle > .cb-cbar { position: absolute; left: -1.5px; right: -1.5px; top: -1.5px; height: 7px; border-radius: 10px 10px 0 0; background: var(--k, #64748B); }
.cb-bn { font-size: 20px; font-weight: 800; line-height: 22px; color: var(--k, #334155); }
.cb-bl { font-size: 11px; line-height: 13px; color: #334155; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cb-far .cb-bn { font-size: 30px; line-height: 34px; }
.cb-far .cb-bl { font-size: 15px; line-height: 17px; }
/* a control's other places show only the count: what hangs under it is drawn once, under its first place */
.cb-efn.else { background: #FEF3C7; border-style: dashed; }
.cb-control .cb-under { font-weight: 700; color: #334155; }
/* while something under the pointer is lit, what is being dragged goes see-through, so the target and the place on the line show */
.cb[data-drop] .cb-card.cb-moving, .cb[data-drop] .cb-card.cb-dragging { opacity: .5; }

/* ── B1: the app's own card beside a selection and the bar above it (components/canvas/canvasHtml.ts) ── */
.bt-d { font-size: 12.5px; color: #1E293B; line-height: 1.4; max-width: 320px; }
.bt-d-h { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.bt-d-k { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748B; }
.bt-d-n { font-weight: 600; color: #1E3A5F; margin-bottom: 6px; }
.bt-d-row { margin: 3px 0; }
.bt-d-row b, .bt-d-rej b { color: #334155; font-weight: 600; margin-right: 2px; }
.bt-d-p { margin: 6px 0 0; color: #475569; white-space: pre-wrap; }
.bt-d-rej { margin: 6px 0; padding: 6px 8px; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 6px; }
.bt-d-drf { margin: 4px 0 8px; padding: 6px 8px; background: #FFFBEB; border: 1px dashed #D69E2E; border-radius: 6px; }
.bt-d-a { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.bt-d-a button { font-size: 12px; padding: 2px 9px; border-radius: 6px; border: 1px solid #CBD5E1; background: #fff; color: #1E3A5F; cursor: pointer; }
.bt-d-a button:hover { background: #F1F5F9; }
.bt-d-a button[data-bt-act="confirm"] { background: #1E3A5F; color: #fff; border-color: #1E3A5F; }
.bt-d-link { color: #1E3A5F; text-decoration: underline; cursor: pointer; font-weight: 600; }
.bt-d-hint { color: #94A3B8; font-size: 11px; }
.bt-d-ro { margin-top: 8px; font-size: 11px; color: #64748B; border-top: 1px solid #E2E8F0; padding-top: 6px; }
.cb-selbar button { font-size: 12px; padding: 2px 8px; border-radius: 6px; border: 0; background: transparent; color: #fff; cursor: pointer; }
.cb-selbar button:hover { background: rgba(255,255,255,.16); }
.bt-sb-n { font-size: 12px; font-weight: 600; color: #fff; padding: 0 4px; }
.bt-sb-why { font-size: 11px; color: #CBD5E1; padding: 0 4px; }
.cb-card.bt-armed-ok { box-shadow: 0 0 0 2px #3B82F6; cursor: copy; }
.cb-card.bt-armed-no { opacity: .45; cursor: not-allowed; }

/* B1 (mockup 09 fix pass): one centre on Extended. The striped box above the red node and its stem are not drawn; the
   key risk's number and name stay readable when the picture is far away. */
.bt-one .cb-krbox, .bt-one .cb-line.box { display: none !important; }
.bt-one .cb-kr > .cb-name { font-size: 16px !important; line-height: 19px !important; transform: scale(min(var(--kru, 1), 1.9)); }
.bt-one .cb-far .cb-kr > .cb-name { max-width: 100px; }

/* ── B1: the canvas rules of mockup 09's 8 Oct stylesheet (09-oct8.css): the link tag, the instance colour, the breadcrumb, the
   rejected stage, sub-hazard chips. Page-only rules of the mockup are left out. ── */
.cb-link { position: absolute; right: 12px; top: -9px; z-index: 2; font-size: 9.5px; font-weight: 700; line-height: 14px; padding: 0 6px; border-radius: 4px; white-space: nowrap; color: #1E3A5F; background: #E0E7FF; border: 1px solid #A5B4FC; }
.cb-link[data-link="is an instance of"] { color: #7F1D1D; background: #FEE2E2; border-color: #FCA5A5; }
.cb-far .cb-link { display: none; }
.cb-card[data-link="inst"] { border-color: #6B46C1 !important; box-shadow: inset 0 3px 0 #6B46C1; }
.cb-card[data-link="contrib"] { border-color: #1E3A5F !important; box-shadow: inset 0 3px 0 #1E3A5F; }
.cb-link { color: #1E3A5F; background: #E2E8F0; border-color: #94A3B8; }
.cb-link[data-link="is an instance of"] { color: #5B21B6; background: #EDE9FE; border-color: #C4B5FD; }
.cb-card[data-kind="ef"] .cb-top:has(.cb-mk.by) .cb-mk.new { display: none; }
.cb-hzu { top: calc(100% + 20px); }
.cb-crumb { position: absolute; right: 10px; bottom: -9px; z-index: 2; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; font-weight: 700; line-height: 14px; padding: 0 6px; border-radius: 4px; color: #475569; background: #fff; border: 1px solid #CBD5E1; }
.cb-far .cb-crumb { display: none; }
.cb-mk.by { color: #1E3A5F; background: #F1F5F9; border: 1px solid #94A3B8; }
.cb-mk.by { font-size: 8.5px; padding: 0 3px; letter-spacing: -.1px; }
.cb-card[data-kind="ef"] .cb-top { gap: 3px; }
.cb-subhazard .cb-top { gap: 2px; }
.cb-subhazard .cb-top .cb-rt { font-size: 8.5px; padding: 0 3px; }
.cb-subhazard .cb-top .cb-ar { margin: 0; font-size: 9px; }
.cb-subhazard .cb-top .cb-id { font-size: 9.5px; letter-spacing: -.2px; }
.cb-subhazard .cb-top .cb-mk { font-size: 8.5px; padding: 0 3px; }
.cb-control.stg-verified { border-style: solid; }
.cb-control.stg-rejected .cb-name { text-decoration: line-through; color: #64748B; }

/* ── B2 F2 + F14 (the founder, 17 Oct: "why when i zoom out would the hazard text not be here … this should be a
   description of the hazard"; "we've generated a picture but it looks different"): a hazard card is drawn the way the
   downloaded picture draws it, a cream box with its name, and keeps its name at every zoom. Far out, the ratings make
   room for the words; the ID stays above them. ── */
.cb-hazard, .cb-subhazard { background: #FFFBEB; }
.cb-far .cb-hazard .cb-top, .cb-far .cb-subhazard .cb-top { height: 22px; justify-content: flex-start; gap: 6px; }
.cb-far .cb-hazard .cb-id, .cb-far .cb-subhazard .cb-id, .cb-far .cb-subhazard .cb-top .cb-id { font-size: 18px; letter-spacing: 0; }
.cb-far .cb-hazard .cb-rt, .cb-far .cb-hazard .cb-ar, .cb-far .cb-subhazard .cb-rt, .cb-far .cb-subhazard .cb-ar { display: none; }
.cb-far .cb-hazard .cb-name, .cb-far .cb-subhazard .cb-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 19px; line-height: 22px; margin-top: 4px; font-weight: 700; color: #1E3A5F; }

/* ── B2 F12 (the founder, 17 Oct: "shouldn't there be a button underneath escalation factor"; "the buttons don't line
   up with what I can click"): every control on an editable bow-tie shows a labelled "+ Escalation factor" button under
   it, always, not only on hover. While a piece of the Add bar is armed, the "+" handles step aside and only the cards
   that can take the piece are marked, so what is shown is what can be clicked. ── */
.cb-edit .cb-control > .cb-h.h-ef.pill { display: inline-flex; }
.cb-h.h-ef.pill { width: auto; height: 20px; border-radius: 10px; padding: 0 8px; font-size: 10.5px; font-weight: 700; white-space: nowrap;
  bottom: -11px; left: auto; right: 8px; color: #78350F; background: #FEF3C7; border: 1.5px solid #F59E0B; box-shadow: 0 0 0 2px #fff; align-items: center; transform-origin: 100% 50%; }
.cb-h.h-ef.pill:hover { background: #FDE68A; transform: scale(calc(var(--cb-hs, 1) * 1.05)); }
.bt-arm .cb-h { display: none !important; }
.bt-arm .cb-card { cursor: not-allowed; }
.bt-arm-ef .cb-control, .bt-arm-control :is(.cb-cause, .cb-hazard, .cb-subhazard, .cb-outcome, .cb-general),
.bt-arm-cause :is(.cb-kr, .cb-hazard, .cb-subhazard, .cb-cause), .bt-arm-outcome :is(.cb-kr, .cb-outcome),
.bt-arm-subhazard :is(.cb-hazard, .cb-subhazard), .bt-arm-hazard .cb-kr { cursor: copy; outline: 2px dashed #D69E2E; outline-offset: 3px; }

/* ── B2 F6 (the founder, 17 Oct: "I thought we're going to show the CRs that were in progress"): what an open change
   request would change, drawn in place. A cause waiting to be linked is a dashed gold card on a dashed line; a link
   waiting to be removed is struck through in red; each says its change request. Nothing here is in the log yet. ── */
.cb-card.waiting { border-style: dashed !important; border-width: 2px; border-color: #D69E2E !important; background: #FFFBEB; }
.cb-card.removing .cb-name, .cb-control.removing .cb-name { text-decoration: line-through; text-decoration-color: #DC2626; text-decoration-thickness: 2px; color: #64748B; }
.cb-card.removing, .cb-control.removing { border-color: #DC2626 !important; border-style: dashed; }
.cb-mk.gone.wait { color: #991B1B; background: #FEE2E2; border: 1px solid #FCA5A5; }
.cb-mk.pend.wait, .cb-mk.gone.wait { white-space: nowrap; }
.cb-line.waiting { stroke-dasharray: 7 5; stroke: #D69E2E !important; }
.cb-line.removing { stroke-dasharray: 3 4; stroke: #DC2626 !important; opacity: .7; }

/* ── B2 F8 (the founder, 17 Oct: "contributes to, but we don't have that"; RULED: the chooser moves onto the hazard
   card): the link word on a hazard's card is the button that changes it. A word an assistant drafted says so. ── */
.cb-link.pick { cursor: pointer; pointer-events: auto; }
.cb-link.pick:hover { filter: brightness(.95); text-decoration: underline; }
.cb-link.drafted { color: #5B21B6; background: #F5F3FF; border-style: dashed; border-color: #7C3AED; }

/* ── B3 G8 (RULED 18 Oct): the instance boxes of mockup 09 (`instListHtml`, 09-oct8.css): hung under the key risk's red box
   and under each hazard card that has instances, joined to it by a short line (red under the key risk, purple under a
   hazard). `--kru` keeps them readable far out. ── */
.cb-kru { position: absolute; left: 50%; top: calc(100% + 24px); width: 0; height: 0; z-index: 3; cursor: default; }
.cb-kr.spine > .cb-kru { top: calc(100% + 12px); }
.cb-hzu { top: calc(100% + 20px); }
.inst9 { position: absolute; left: 0; top: 0; width: 256px; margin-left: -128px; transform: scale(var(--kru, 1)); transform-origin: 50% 0; box-sizing: border-box; background: #fff; border: 1.5px solid var(--cb-top, #C53030); border-radius: 10px; padding: 6px 6px 5px;
  text-align: left; color: #1E293B; font-size: 11.5px; font-weight: 400; line-height: 1.25; box-shadow: 0 3px 10px rgba(15,23,42,.14); white-space: normal; }
.inst9::before { content: ''; position: absolute; left: 50%; top: -13px; height: 12px; border-left: 2px solid var(--cb-top, #C53030); }
.inst9.nest { width: 236px; margin-left: -118px; border-color: #6B46C1; transform: scale(min(var(--kru, 1), 1.5)); }
.inst9.nest::before { border-left-color: #6B46C1; }
.inst-kr { font-size: 12.5px; font-weight: 700; color: #1E293B; padding: 1px 4px 0; }
.inst-h { font-size: 11.5px; font-weight: 700; color: #7F1D1D; padding: 1px 4px 4px; }
.inst9.nest .inst-h { color: #5B21B6; }
.inst-r { display: flex; align-items: center; gap: 5px; padding: 3px 4px; border-radius: 6px; cursor: pointer; }
.inst-r:hover { background: #F5F3FF; }
.inst-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.inst-1 { display: flex; align-items: center; gap: 5px; }
.inst9 .cb-id { flex: none; font-size: 10px !important; line-height: 14px !important; padding: 0 4px !important; }
.inst-k { flex: none; font-size: 9.5px; font-weight: 700; line-height: 13px; padding: 0 4px; border-radius: 4px; color: #5B21B6; background: #EDE9FE; border: 1px solid #C4B5FD; white-space: nowrap; }
.inst-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* B3 G8: the line from an instance to the card above it is purple (mockup 09 `linkStyle`, INST_COL). */
path.cb-line.inst { stroke: #6B46C1 !important; }