/* Support triage on a dark panel (includes/visuals/handover.php): channels → sorting → automatic handling → adviser */
.ho { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ho p { margin: 0; }
.ho-h { display: none; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.ho-srl { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--green); margin-bottom: 6px; }

/* cards */
.ho-card { position: relative; min-width: 0; padding: 16px 18px 18px; border-radius: 10px; background: var(--forest-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset; color: var(--white); }
.ho-cat { font-family: var(--font-serif); font-weight: 600; font-size: 18px; line-height: 1.2; }
.ho-ex { margin-top: 5px; font-size: 13px; line-height: 1.4; color: var(--sage); }
.ho-who { margin-bottom: 8px; }
.ho-does { font-size: 13.5px; line-height: 1.45; }
.ho-out { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 13px; line-height: 1.4; color: var(--white); }
.ho-ck { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--green); color: var(--forest); }
.ho-ck svg { width: 11px; height: 11px; }

/* the channels */
.ho-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ho-pill { position: relative; padding: 7px 13px; border-radius: 999px; background: var(--white); color: var(--forest); font-size: 13px; font-weight: 600; line-height: 1.3; }

/* the adviser, the rule, the sources, the loop */
.ho-adv { background: var(--white); color: var(--ink); box-shadow: 0 0 0 2px var(--green); }
.ho-adv .ho-srl { color: var(--green-text); }
.ho-adv-t { font-family: var(--font-serif); font-weight: 600; font-size: 18px; line-height: 1.2; color: var(--forest); }
.ho-adv-l, .ho-rule-l, .ho-src-l { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.4; }
.ho-adv-l li { display: flex; align-items: flex-start; gap: 9px; }
.ho-adv-l li::before { content: ""; flex: none; width: 12px; height: 2px; margin-top: 8px; background: var(--green-text); }
.ho-adv-t2 { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--green-text); }
.ho-adv-l--keep { margin-top: 8px; }
.ho-adv-l--keep li::before { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--forest); }
.ho-adv-n { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.4; color: var(--ink-2); font-style: italic; }
.ho-rule { background: none; box-shadow: none; border: 1.5px dashed var(--green-2); }
.ho-rule-t { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--green); }
.ho-dia { flex: none; width: 11px; height: 11px; margin: 0 3px; border-radius: 2px; background: var(--green); transform: rotate(45deg); }
.ho-rule-l li { display: flex; align-items: flex-start; gap: 9px; color: var(--white); }
.ho-rule-l li::before { content: ""; flex: none; width: 7px; height: 7px; margin: 6px 2px 0; border-radius: 1.5px; background: var(--green-2); transform: rotate(45deg); }
.ho-src { background: var(--mint); color: var(--forest); box-shadow: none; }
.ho-src-t { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--green-text); }
.ho-src-l li { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.ho-src-l li::before { content: ""; flex: none; width: 14px; height: 10px; border: 1.8px solid var(--forest); border-radius: 2px; }
.ho-src-n { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.ho-loop { display: flex; align-items: center; gap: 14px; font-size: 13.5px; line-height: 1.4; color: var(--sage); }
.ho-loop strong { color: var(--white); font-weight: 700; }
.ho-loop-line { position: relative; flex: 1 1 60px; height: 2px; background: repeating-linear-gradient(90deg, var(--green-2) 0 7px, transparent 7px 12px); }
.ho-loop-line::before { content: ""; position: absolute; left: 1px; top: -4px; width: 10px; height: 10px; border-left: 2.5px solid var(--green-2); border-bottom: 2.5px solid var(--green-2); transform: rotate(45deg); }
.ho-arr { display: none; }

/* phones and tablets: one column; each lane is a dashed group (sorting, then its handling) */
@media (max-width: 899px) {
  .ho-lane { display: grid; gap: 10px; padding: 12px; border: 1px dashed rgba(255, 255, 255, .28); border-radius: 12px; }
  .ho-lane .ho-card { padding: 14px 16px 16px; }
  .ho-auto { margin-top: 18px; }
  .ho-auto::before { content: ""; position: absolute; left: 50%; top: -20px; width: 10px; height: 10px; margin-left: -5px; border-right: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green); transform: rotate(45deg); }
  .ho-adv { margin-top: 14px; }
  .ho-adv::before { content: ""; position: absolute; left: 50%; top: -22px; width: 10px; height: 10px; margin-left: -5px; border-right: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green); transform: rotate(45deg); }
  .ho-loop { flex-wrap: wrap; }
  .ho-loop-line { flex-basis: 100%; }
}

/* wide screens: four columns, the arrow gutters being explicit columns */
@media (min-width: 900px) {
  .ho { display: grid; grid-template-columns: 140px 36px minmax(0, 1fr) 36px minmax(0, 1.3fr) 124px minmax(0, 1fr); column-gap: 0; row-gap: 16px; align-items: stretch; }
  .ho-h { display: block; margin-bottom: 2px; }
  .ho-h--1 { grid-area: 1 / 1; } .ho-h--2 { grid-area: 1 / 3; } .ho-h--3 { grid-area: 1 / 5; } .ho-h--4 { grid-area: 1 / 7; }
  .ho-srl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .ho-lane { display: contents; }
  .ho-ch { position: relative; grid-area: 2 / 1 / 5 / 2; display: flex; align-items: center; }
  .ho-ch::after { content: ""; position: absolute; right: -19px; top: 60px; bottom: 60px; width: 2px; background: var(--green-2); transform-origin: top; }
  .ho-pills { flex-direction: column; width: 100%; gap: 10px; }
  .ho-pill { display: block; text-align: center; }
  .ho-pill::after { content: ""; position: absolute; left: 100%; top: calc(50% - 1px); width: 18px; height: 2px; background: var(--green-2); transform-origin: left; }
  .ho-sort { position: relative; align-self: center; }
  .ho-sort::before { content: ""; position: absolute; left: -18px; top: calc(50% - 1px); width: 18px; height: 2px; background: var(--green-2); transform-origin: right; }
  .ho-sort--1 { grid-area: 2 / 3; } .ho-sort--2 { grid-area: 3 / 3; } .ho-sort--3 { grid-area: 4 / 3; }
  .ho-auto--1 { grid-area: 2 / 5; } .ho-auto--2 { grid-area: 3 / 5; } .ho-auto--3 { grid-area: 4 / 5; }
  .ho-auto { z-index: 1; }
  .ho-adv { grid-area: 2 / 7 / 5 / 8; z-index: 0; }
  .ho-src { grid-area: 5 / 5; margin-top: 14px; align-self: start; }
  .ho-rule { grid-area: 5 / 7; margin-top: 14px; }
  .ho-loop { grid-area: 6 / 5 / 7 / 8; margin-top: 4px; }
  /* arrows into and out of the handling cards */
  .ho-arr { display: block; position: absolute; z-index: 2; top: calc(50% - 1px); height: 2px; background: var(--green-2); }
  .ho-arr::after { content: ""; position: absolute; right: 1px; top: -4px; width: 8px; height: 8px; border-top: 2.5px solid var(--green-2); border-right: 2.5px solid var(--green-2); transform: rotate(45deg); }
  .ho-arr--in { left: -36px; width: 36px; transform-origin: left; }
  .ho-arr--out { right: -124px; width: 124px; transform-origin: left; }
  .ho-auto--rule .ho-arr--out { background: repeating-linear-gradient(90deg, var(--green-2) 0 7px, transparent 7px 12px); }
  .ho-auto--rule .ho-arr--out::before { content: ""; position: absolute; left: calc(50% - 6px); top: -5px; width: 11px; height: 11px; border-radius: 2px; background: var(--green); transform: rotate(45deg); }
  .ho-arr-tag { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--green); }
  .ho-auto--rule .ho-arr-tag { bottom: 10px; }
  /* the sources feed the handling column */
  .ho-src::before { content: ""; position: absolute; left: calc(50% - 6px); top: -14px; width: 11px; height: 11px; border-left: 2.5px solid var(--green); border-top: 2.5px solid var(--green); transform: rotate(45deg); }
  .ho-src::after { content: ""; position: absolute; left: calc(50% - 1px); top: -14px; width: 2px; height: 14px; background: var(--green); }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .ho { grid-template-columns: 112px 32px minmax(0, 1fr) 32px minmax(0, 1.3fr) 100px minmax(0, 1fr); }
  .ho-card { padding: 14px 14px 16px; }
  .ho-cat, .ho-adv-t { font-size: 16.5px; }
  .ho-pill { padding: 6px 8px; font-size: 12.5px; }
  .ho-ch::after { right: -17px; }
  .ho-pill::after, .ho-sort::before { width: 16px; }
  .ho-sort::before { left: -16px; }
  .ho-arr--in { left: -32px; width: 32px; }
  .ho-arr--out { right: -100px; width: 100px; }
  .ho-arr-tag { font-size: 9.5px; letter-spacing: .04em; }
  .ho-does, .ho-adv-l, .ho-rule-l, .ho-src-l { font-size: 13px; }
}

/* intro: the channels join the bracket, the sorting cards slide in, the arrows reach the handling, then the
   adviser, the rule, the sources; the loop then keeps flowing back towards the sources */
.js .vz-figure .ho-pill { opacity: 0; transform: translateX(-8px); transition: opacity .35s ease, transform .4s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .ho-pill--1 { transition-delay: .05s; } .js .vz-figure .ho-pill--2 { transition-delay: .15s; }
.js .vz-figure .ho-pill--3 { transition-delay: .25s; } .js .vz-figure .ho-pill--4 { transition-delay: .35s; }
.js .vz-figure .ho-pill::after { transform: scaleX(0); transition: transform .3s ease .45s; }
.js .vz-figure .ho-ch::after { transform: scaleY(0); transition: transform .4s ease .55s; }
.js .vz-figure .ho-sort::before { transform: scaleX(0); transition: transform .3s ease .9s; }
.js .vz-figure .ho-sort, .js .vz-figure .ho-auto, .js .vz-figure .ho-adv, .js .vz-figure .ho-rule, .js .vz-figure .ho-src { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .ho-sort--1 { transition-delay: .7s; } .js .vz-figure .ho-sort--2 { transition-delay: .8s; } .js .vz-figure .ho-sort--3 { transition-delay: .9s; }
.js .vz-figure .ho-arr--in { transform: scaleX(0); transition: transform .35s ease 1.05s; }
.js .vz-figure .ho-auto--1 { transition-delay: 1.2s; } .js .vz-figure .ho-auto--2 { transition-delay: 1.3s; } .js .vz-figure .ho-auto--3 { transition-delay: 1.4s; }
.js .vz-figure .ho-arr--out { transform: scaleX(0); transition: transform .4s ease 1.6s; }
.js .vz-figure .ho-arr-tag { opacity: 0; transition: opacity .3s ease 1.9s; }
.js .vz-figure .ho-adv { transition-delay: 1.75s; }
.js .vz-figure .ho-rule { transition-delay: 2s; }
.js .vz-figure .ho-src { transition-delay: 2.15s; }
.js .vz-figure .ho-src::before, .js .vz-figure .ho-src::after, .js .vz-figure .ho-loop { opacity: 0; transition: opacity .4s ease 2.3s; }
.js .vz-figure .ho-loop { transition-delay: 2.5s; }
.js .vz-figure.is-visible .ho-pill, .js .vz-figure.is-visible .ho-sort, .js .vz-figure.is-visible .ho-auto, .js .vz-figure.is-visible .ho-adv, .js .vz-figure.is-visible .ho-rule, .js .vz-figure.is-visible .ho-src { opacity: 1; transform: none; }
.js .vz-figure.is-visible .ho-pill::after, .js .vz-figure.is-visible .ho-ch::after, .js .vz-figure.is-visible .ho-sort::before, .js .vz-figure.is-visible .ho-arr--in, .js .vz-figure.is-visible .ho-arr--out { transform: none; }
.js .vz-figure.is-visible .ho-arr-tag { opacity: 1; transform: translateX(-50%); }
.js .vz-figure.is-visible .ho-src::before, .js .vz-figure.is-visible .ho-src::after, .js .vz-figure.is-visible .ho-loop { opacity: 1; }
.vz-figure.is-visible .ho-loop-line, html:not(.js) .ho-loop-line { animation: ho-back 1s linear 2.9s infinite; }
@keyframes ho-back { to { background-position: -12px 0; } }
@media (max-width: 899px) {
  .js .vz-figure .ho-sort, .js .vz-figure .ho-auto { transition-delay: .2s; }
  .js .vz-figure .ho-adv { transition-delay: .3s; }
  .js .vz-figure .ho-rule, .js .vz-figure .ho-src { transition-delay: .4s; }
  .js .vz-figure .ho-loop { transition-delay: .6s; }
}