/* Decision fork for an ageing software: signs, reading on four criteria, three outcomes, migration under "replace"
   (includes/visuals/fork.php) */
.fk { --fk-gap: 44px; --fk-fan: 52px; display: grid; grid-template-columns: minmax(0, 1fr) var(--fk-fan) minmax(0, 1.25fr) var(--fk-fan) minmax(0, 1.05fr); gap: var(--fk-gap) 0; align-items: stretch; }
.fk-col { min-width: 0; display: flex; flex-direction: column; }
.fk-col-l { margin: 0 0 12px; line-height: 18px; }
.fk-down { display: none; }

/* the signs: a stack of findings, one line each, spread over the column height so the fan meets them */
.fk-signs { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 8px; }
.fk-sign { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: var(--radius-sm); background: var(--paper); font-size: 14px; line-height: 1.35; color: var(--forest); min-width: 0; }
.fk-sign::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 2.5px var(--mint); }

/* the fans */
.fk-fan { display: block; width: 100%; height: 100%; min-height: 120px; overflow: visible; }
.fk-fan path { fill: none; stroke: #7d8a80; stroke-width: 1.8; stroke-dasharray: 5 7; stroke-linecap: round; }
.fk-fan--in { margin-top: 30px; height: calc(100% - 30px); }
.fk-fan--out { margin-top: 30px; height: calc(100% - 30px); }
.fk-fan--out path { stroke: var(--forest); }

/* the reading card: four spectrums, the cursor to be placed */
.fk-col--read { justify-content: center; padding-top: 30px; }
.fk-read { padding: 22px 24px 18px; border-radius: var(--radius); background: var(--paper); border: 1.5px solid var(--line); }
.fk-read-l { margin: 0 0 14px; }
.fk-crits { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fk-crit { display: grid; gap: 6px; min-width: 0; }
.fk-crit-n { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--forest); }
.fk-spec { position: relative; display: block; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--sage), var(--line) 50%, var(--forest-2)); }
.fk-cursor { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%) rotate(45deg); border: 2.5px solid var(--forest); border-radius: 2px; background: var(--white); }
.fk-ends { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
.fk-scale { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green-text); }
.fk-scale span:last-child { text-align: right; }
.fk-cursor-l { position: relative; display: flex; align-items: center; gap: 12px; margin: 10px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.fk-cursor--key { position: static; flex: none; width: 11px; height: 11px; transform: rotate(45deg); margin: 0 3px; }

/* the three outcomes */
.fk-col--outs { justify-content: center; }
.fk-outs { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 10px; }
.fk-out { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px 18px; border-radius: var(--radius); min-width: 0; }
.fk-out--repair { background: var(--mint); color: var(--forest); }
.fk-out--extend { background: var(--white); color: var(--forest); border: 1.5px solid var(--forest); }
.fk-out--replace { background: var(--forest); color: var(--white); }
.fk-out-t { font-family: var(--font-serif); font-size: 21px; line-height: 1.15; }
.fk-out-s { font-size: 13.5px; line-height: 1.4; }
.fk-out-w { margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.fk-out--replace .fk-out-w { color: rgba(255, 255, 255, .78); }
.fk-out-wl { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; color: var(--green-text); }
.fk-out--replace .fk-out-wl { color: var(--green); }
/* the stub dropping from "replace" into the migration strip */
.fk-out--replace::after { content: ""; position: absolute; left: 50%; top: 100%; width: 0; height: var(--fk-gap); border-left: 2.5px solid var(--forest); }
.fk-out--replace::before { content: ""; position: absolute; left: 50%; top: calc(100% + var(--fk-gap) - 9px); width: 8px; height: 8px; border-right: 2.5px solid var(--forest); border-bottom: 2.5px solid var(--forest); transform: translateX(calc(-50% - 1.25px)) rotate(45deg); }

/* the migration strip, across the whole width */
.fk-path { grid-column: 1 / -1; padding: 20px 24px 22px; border-radius: var(--radius); background: var(--paper); border: 1.5px solid var(--line); }
.fk-path-l { margin: 0 0 16px; }
.fk-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 10px; counter-reset: fk; }
.fk-step { position: relative; display: grid; align-content: start; gap: 4px; min-width: 0; padding: 12px 14px 12px 16px; border-radius: var(--radius-sm); background: var(--white); border: 1.5px solid var(--line); }
.fk-step + .fk-step::before { content: ""; position: absolute; left: -9px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--forest); border-top: 2px solid var(--forest); transform: translateY(-50%) rotate(45deg); }
.fk-step-n { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--green-text); font-variant-numeric: tabular-nums; }
.fk-step-t { font-size: 14.5px; line-height: 1.3; color: var(--forest); }
.fk-step-d { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.fk-step--end { background: var(--forest); border-color: var(--forest); }
.fk-step--end .fk-step-t { color: var(--green); }
.fk-step--end .fk-step-d { color: rgba(255, 255, 255, .82); }

/* animation: the signs come in from the left, their lines reach the reading card, the cursors settle, the
   outcomes light up one after the other, the stub drops and the migration unfolds step by step; afterwards the
   dashes keep flowing along the fans */
.js .vz-figure .fk-sign { opacity: 0; transform: translateX(-14px); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .fk-sign--2 { transition-delay: .1s; } .js .vz-figure .fk-sign--3 { transition-delay: .2s; } .js .vz-figure .fk-sign--4 { transition-delay: .3s; } .js .vz-figure .fk-sign--5 { transition-delay: .4s; }
.js .vz-figure .fk-fan--in path { opacity: 0; transition: opacity .6s ease .55s; }
.js .vz-figure .fk-read { opacity: 0; transform: scale(.96); transition: opacity .5s ease .8s, transform .6s cubic-bezier(.2, .7, .2, 1) .8s; }
.js .vz-figure .fk-cursor { opacity: 0; transition: opacity .35s ease 1.25s; }
.js .vz-figure .fk-crit--2 .fk-cursor { transition-delay: 1.35s; } .js .vz-figure .fk-crit--3 .fk-cursor { transition-delay: 1.45s; } .js .vz-figure .fk-crit--4 .fk-cursor { transition-delay: 1.55s; }
.js .vz-figure .fk-fan--out path { opacity: 0; transition: opacity .6s ease 1.4s; }
.js .vz-figure .fk-out { opacity: 0; transform: translateX(10px); transition: opacity .45s ease 1.6s, transform .55s cubic-bezier(.2, .7, .2, 1) 1.6s; }
.js .vz-figure .fk-out--2 { transition-delay: 1.75s; } .js .vz-figure .fk-out--3 { transition-delay: 1.9s; }
.js .vz-figure .fk-out--replace::after { transform: scaleY(0); transform-origin: top; transition: transform .4s ease 2.2s; }
.js .vz-figure .fk-out--replace::before { opacity: 0; transition: opacity .3s ease 2.55s; }
.js .vz-figure .fk-path-l { opacity: 0; transition: opacity .5s ease 2.4s; }
.js .vz-figure .fk-step { opacity: 0; transform: translateY(8px); transition: opacity .4s ease 2.5s, transform .5s cubic-bezier(.2, .7, .2, 1) 2.5s; }
.js .vz-figure .fk-step--2 { transition-delay: 2.6s; } .js .vz-figure .fk-step--3 { transition-delay: 2.7s; } .js .vz-figure .fk-step--4 { transition-delay: 2.8s; } .js .vz-figure .fk-step--5 { transition-delay: 2.9s; } .js .vz-figure .fk-step--end { transition-delay: 3.05s; }
.js .vz-figure.is-visible .fk-sign, .js .vz-figure.is-visible .fk-fan--in path, .js .vz-figure.is-visible .fk-read, .js .vz-figure.is-visible .fk-cursor, .js .vz-figure.is-visible .fk-fan--out path,
.js .vz-figure.is-visible .fk-out, .js .vz-figure.is-visible .fk-out--replace::before, .js .vz-figure.is-visible .fk-path-l, .js .vz-figure.is-visible .fk-step { opacity: 1; transform: none; }
.js .vz-figure.is-visible .fk-cursor { transform: translate(-50%, -50%) rotate(45deg); }
.js .vz-figure.is-visible .fk-cursor--key { transform: rotate(45deg); }
.js .vz-figure.is-visible .fk-out--replace::after { transform: none; }
.js .vz-figure.is-visible .fk-out--replace::before { transform: translateX(calc(-50% - 1.25px)) rotate(45deg); }
.js .vz-figure.is-visible .fk-fan path { animation: fk-flow 1.4s linear 2s infinite; }
@keyframes fk-flow { to { stroke-dashoffset: -24; } }

@media (max-width: 1100px) and (min-width: 760px) {
  .fk { --fk-fan: 34px; }
  .fk-read { padding: 18px 16px 14px; }
  .fk-sign { font-size: 13.5px; padding: 8px 12px; }
  .fk-out { padding: 12px 14px; }
  .fk-out-t { font-size: 19px; }
  .fk-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .fk-step + .fk-step::before { display: none; }
}

/* phones: one column in reading order, the fans replaced by down arrows, the migration stacked */
@media (max-width: 759px) {
  .fk { --fk-gap: 28px; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fk-fan { display: none; }
  .fk-down { display: flex; justify-content: center; color: var(--forest); }
  .fk-down svg { width: 16px; height: 24px; display: block; }
  .fk-signs { gap: 6px; }
  .fk-sign { font-size: 13.5px; padding: 8px 12px; }
  .fk-col--read { padding-top: 0; }
  .fk-read { padding: 18px 16px 14px; }
  .fk-outs { gap: 8px; }
  .fk-out { padding: 13px 16px; }
  .fk-out-t { font-size: 19px; }
  .fk-out--replace::after { height: 28px; }
  .fk-out--replace::before { top: calc(100% + 28px - 9px); }
  .fk-path { margin-top: 12px; padding: 18px 16px; }
  .fk-steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fk-step { grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: baseline; padding: 11px 14px; }
  .fk-step-n { grid-row: 1 / 3; }
  .fk-step + .fk-step::before { left: 50%; top: -9px; width: 7px; height: 7px; transform: translateX(-50%) rotate(135deg); border-color: var(--forest); }
  .fk-step--end { grid-template-columns: minmax(0, 1fr); }
}