/* The two flow pages: the diagram (flow-diagram.js) and the drawer that opens a conviction. */

/* Step colours: the category colours from brand.css. */
.fj .p-arch{--c:var(--cat-teal); --t:var(--cat-teal-tint)}
.fj .p-spec{--c:var(--cat-slate); --t:var(--cat-slate-tint)}
.fj .p-gen{--c:var(--cat-amber); --t:var(--cat-amber-tint)}
.fj .p-val{--c:var(--cat-green); --t:var(--cat-green-tint)}
.fj .p-leer{--c:var(--cat-violet); --t:var(--cat-violet-tint)}
.fj .p-human{--c:var(--cat-grey); --t:var(--cat-grey-tint)}

/* The heading: the title, then one paragraph saying what the diagram shows. */
.fj .j-pgh{display:flex; justify-content:space-between; align-items:center; gap:8px 16px; flex-wrap:wrap; padding:16px 0 12px}
.fj .j-pgh h1{margin:0}
.j-intro{margin:0 0 18px; font-size:16px; line-height:1.55; color:var(--ink)}

/* The diagram card. */
.j-card{background:#fff; border:2px solid var(--accent); border-radius:20px; padding:14px 18px 16px; box-shadow:var(--shadow-lg)}
.j-card button{font:inherit; text-align:left; cursor:pointer; color:inherit; background:none; border:0; padding:0; margin:0}

/* Shared: small labels, commands as chips, and the conviction buttons in their step's colour. The buttons are the only thing to click. */
.k-k{display:block; font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.75}
.k-cmd{display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center}
.k-cmd code{font:600 12.5px ui-monospace,Menlo,Consolas,monospace; color:var(--c); background:#fff; border:1px solid color-mix(in srgb, var(--c) 40%, #fff); border-radius:6px; padding:1px 6px}
.k-who{font-size:12.5px; color:var(--muted)}
.k-cvs{display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.j-card .k-cv{font-size:13px; font-weight:700; line-height:1.25; color:#fff; background:var(--c); border-radius:8px; padding:6px 9px; text-wrap:balance; transition:filter .15s, box-shadow .15s, transform .15s}
/* Hover lifts the button, lightens it and gives it a shadow in its own colour, so it is clear it can be clicked. */
.j-card .k-cv:hover{filter:brightness(1.3) saturate(1.2); transform:translateY(-2px); box-shadow:0 8px 18px -4px color-mix(in srgb, var(--c) 85%, transparent)}
.j-card .k-cv.sel{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--c)}

/* The tooltip on a button: the conviction's headline and claim, edged in the step's colour. */
.k-tip{position:absolute; z-index:50; width:300px; display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:10px; background:#fff; border:1px solid var(--line); border-top:3px solid var(--c, var(--brand)); box-shadow:var(--shadow-lg); pointer-events:none; font-size:13px; line-height:1.45; color:var(--ink-2)}
.k-tip[hidden]{display:none}
.k-tip b{font-size:14px; line-height:1.3; color:var(--ink)}
@media (hover:none){ .k-tip{display:none} }

/* The team, on top, in a light tint of its own: its name, its buttons, then what it says. Amber buttons set it apart from the steps. */
.k-team{display:flex; align-items:center; gap:10px 24px; margin:0 0 14px; padding:12px 18px; border-radius:12px; background:var(--accent-soft); border:1.5px solid #cfdcf5; color:var(--ink)}
.k-th{flex:none; display:flex; flex-direction:column; gap:2px}
.k-th .k-k{color:var(--accent-2)}
.k-th b{font-size:16px; letter-spacing:-.01em}
.k-tdo{flex:0 1 640px; font-size:14px; line-height:1.5; color:var(--ink-2)}
.k-team .k-cvs{flex:none; flex-direction:row; flex-wrap:wrap}
.j-card .k-team .k-cv{background:var(--brand); color:var(--ink)}
.j-card .k-team .k-cv:hover{filter:brightness(1.1); box-shadow:0 6px 14px -4px color-mix(in srgb, var(--brand) 80%, transparent)}
.j-card .k-team .k-cv.sel{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--brand)}
.k-team.sel{border-color:var(--accent-2)}

/* The steps: a chevron with the step's name, then what you run, what you do, and its convictions.
   The steps share their rows, so each line sits at the same height across them. */
.k-wrap{position:relative; padding:0 30px}
.k-row{position:relative; z-index:1; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); grid-template-rows:64px auto 1fr auto; column-gap:4px}
.k-st{position:relative; display:grid; grid-row:span 4; grid-template-rows:subgrid}
/* The open conviction tints its step. */
.k-st::before{content:""; position:absolute; z-index:-1; inset:64px 2px 0; border-radius:0 0 12px 12px; background:var(--t); border:1.5px solid var(--c); border-top:0; opacity:0; transition:opacity .15s}
.k-st.sel::before{opacity:1}
.k-chev{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:2px; padding:0 24px 0 32px; background:var(--t); color:var(--c); line-height:1.15;
  clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%)}
.k-st:first-child .k-chev{padding-left:16px; border-radius:10px 0 0 10px; clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%)}
.k-chev b{font-size:15.5px; font-weight:700; letter-spacing:-.01em}
.k-st.sel .k-chev{background:color-mix(in srgb, var(--c) 32%, #fff)}
.k-st > .k-cmd{padding:12px 10px 0 16px}
.k-do{padding:8px 12px 0 16px; font-size:13.5px; line-height:1.5; color:var(--ink)}
.k-st > .k-cvs{padding:10px 4px 16px 16px}

/* The hand-off to the next page: a hatched chevron after the last step, so it reads as where this page stops. The whole of it links on. */
.k-row--end{grid-template-columns:repeat(var(--n),minmax(0,1fr)) minmax(0,.8fr)}
.k-end{display:grid; grid-row:span 4; grid-template-rows:subgrid; color:var(--ink); text-decoration:none}
.k-end .k-chev{color:var(--ink); background:repeating-linear-gradient(135deg, #eef0f4 0 6px, #fff 6px 12px); transition:background .15s}
.k-end .k-chev .k-k{color:var(--muted); opacity:1}
.k-end .k-chev b{color:var(--accent-2)}
.k-end:hover{text-decoration:none}
.k-end:hover .k-chev{background:repeating-linear-gradient(135deg, #dfe5ee 0 6px, #f4f6f9 6px 12px)}
.k-end:hover .k-chev b{text-decoration:underline}
.k-end .k-do{color:var(--muted)}

/* The way back: out of the last step, down, back along the bottom through Learning, up into the first step. */
.k-rail{--rail:color-mix(in srgb, var(--cat-violet) 50%, #fff); position:absolute; left:8px; right:8px; top:32px; bottom:32px; border:2px solid var(--rail); border-top:0; border-radius:0 0 16px 16px}
.k-rail::before{content:""; position:absolute; left:-2px; top:-2px; width:16px; height:2px; background:var(--rail)}
.k-rail::after{content:""; position:absolute; left:11px; top:-7px; border:6px solid transparent; border-left:9px solid var(--rail)}
.j-card .k-learn{position:relative; z-index:1; display:flex; align-items:center; gap:12px 28px; width:calc(100% - 120px); min-height:64px; margin:8px 0 0 24px; padding:10px 18px 10px 40px;
  background:var(--t); color:var(--c); clip-path:polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%)}
.j-card .k-learn.sel{background:color-mix(in srgb, var(--c) 32%, #fff)}
.k-lh{flex:none; font-size:15.5px; font-weight:700; letter-spacing:-.01em; white-space:nowrap}
.k-ldo{display:flex; flex-direction:column; gap:5px; font-size:13.5px; line-height:1.45; color:var(--ink)}
.k-learn .k-cvs{flex-direction:row; flex-wrap:wrap; margin-left:auto}

/* While a conviction is open, keep the diagram visible behind the drawer so the highlighted step can be seen. */
.fj .dw-scrim{background:rgba(18,22,29,.12)}

@media (max-width:860px){
  .k-team{flex-wrap:wrap}
  .k-wrap{padding:0}
  .k-rail{display:none}
  .k-row, .k-row--end{grid-template-columns:1fr; grid-template-rows:none; row-gap:10px}
  .k-st, .k-end{display:flex; flex-direction:column; grid-row:auto}
  .k-st::before{inset:56px 0 0}
  .k-st:first-child .k-chev, .k-chev{padding-left:16px; clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%); border-radius:10px 0 0 10px; min-height:56px}
  .j-card .k-learn{width:100%; margin:12px 0 0; flex-wrap:wrap; padding:10px 14px 10px 34px}
  .k-learn .k-cvs{margin-left:0}
}