/* Steering schema: scattered sources → shared definitions → a steering sheet without values (includes/visuals/cockpit.php) */
.cp { --cp-gap: 12px; --cp-line: rgba(255, 255, 255, .14); --cp-soft: rgba(255, 255, 255, .78); }
.cp .vz-label { margin: 0; }

/* the existing sources */
.cp-src { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cp-gap); }
.cp-s { display: flex; flex-direction: column; min-width: 0; }
.cp-card { flex: 1 1 auto; padding: 12px 13px 12px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .07); border: 1px solid var(--cp-line); }
.cp-sn { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--white); }
.cp-sh { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--cp-soft); }
.cp-so { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, .22); font-size: 12.5px; line-height: 1.4; color: var(--white); font-style: italic; }
.cp-so-l { display: block; margin-bottom: 2px; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-soft); }

/* the kind of link: a chip by default, a labelled line on wide layouts */
.cp-link { display: flex; flex-direction: column; align-items: center; margin: 8px 0 0; }
.cp-lk { display: inline-block; padding: 3px 9px; text-align: center; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--green); border: 1px solid rgba(150, 248, 120, .45); }
.cp-link i { display: none; width: 0; height: 26px; border-left: 2px solid var(--green); }
.cp-link--extract i { border-left-style: dashed; }
.cp-link--read i { border-left-style: dotted; border-left-width: 3px; }

/* shared definitions */
.cp-dict { margin-top: 16px; padding: 14px 16px 16px; border-radius: var(--radius-sm); background: rgba(150, 248, 120, .08); border: 1px solid rgba(150, 248, 120, .45); }
.cp-dl { margin: 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.25; color: var(--white); }
.cp-terms { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.cp-term { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; min-width: 0; padding: 8px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; line-height: 1.4; }
.cp-term strong { font-weight: 600; color: var(--white); }
.cp-def { grid-column: 1; color: var(--cp-soft); }
.cp-ref { grid-column: 2; grid-row: 1 / 3; justify-self: end; padding: 3px 9px; border-radius: 999px; background: var(--mint); color: var(--forest); font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; }

/* the drop to the sheet */
.cp-down { position: relative; display: block; width: 0; height: 28px; margin: 0 auto; border-left: 2px solid var(--green); }
.cp-down::after { content: ""; position: absolute; left: -5px; bottom: -1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--green); }

/* the steering sheet: a light card */
.cp-sheet { padding: 16px 18px 6px; border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); }
.cp-st { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; }
.cp-st strong { font-family: var(--font-serif); font-size: 20px; font-weight: 400; line-height: 1.2; color: var(--forest); }
.cp-tag { padding: 3px 9px; border-radius: 999px; background: var(--forest); color: var(--green); font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.cp-head, .cp-row { display: grid; grid-template-columns: minmax(0, 1.25fr) 96px minmax(0, 1.15fr); column-gap: 14px; align-items: center; }
.cp-head { margin: 0; padding-bottom: 8px; border-bottom: 2px solid var(--forest); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green-text); }
.cp-head span:nth-child(2) { text-align: center; }
.cp-rows { list-style: none; margin: 0; padding: 0; }
.cp-row { padding: 11px 0; border-bottom: 1px solid var(--line); }
.cp-row:last-child { border-bottom: 0; }
.cp-ind { min-width: 0; }
.cp-in { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--forest); }
.cp-im { display: flex; flex-wrap: wrap; gap: 3px 10px; margin: 4px 0 0; font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.cp-m { display: inline-flex; align-items: center; gap: 4px; }
.cp-m--def { color: var(--green-text); }
.cp-tick { width: 11px; height: 11px; }
.cp-m--freq { padding: 0 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--forest); font-weight: 600; }
.cp-val { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; height: 34px; border-radius: 6px; background: var(--white); border: 1px dashed #a9a39b; }
.cp-val i { width: 5px; height: 5px; border-radius: 50%; background: #a9a39b; }
.cp-act { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 0; min-width: 0; font-size: 13px; line-height: 1.4; }
.cp-th { color: var(--ink-2); }
.cp-arrow { margin-right: 5px; color: var(--green-text); font-weight: 700; }
.cp-do { font-weight: 600; color: var(--forest); }

/* who reads it */
.cp-readers { margin-top: 18px; }
.cp-who { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cp-who li { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; padding: 6px 11px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .07); border: 1px solid var(--cp-line); font-size: 13px; line-height: 1.3; }
.cp-who strong { font-weight: 600; color: var(--white); }
.cp-who span { color: var(--cp-soft); font-size: 12.5px; }

/* wide layouts: four sources in a row, each hanging its labelled connector down to the definitions box */
@media (min-width: 1200px), (min-width: 700px) and (max-width: 999px) {
  .cp-src { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cp-link { margin-top: 10px; }
  .cp-link i { display: block; }
  .cp-dict { margin-top: 0; }
  .cp-terms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
  .cp-term { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 8px 0 0; }
  .cp-ref { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
  .cp-row { grid-template-columns: minmax(0, 1.3fr) 110px minmax(0, 1.1fr); }
  .cp-head { grid-template-columns: minmax(0, 1.3fr) 110px minmax(0, 1.1fr); }
}

/* narrow sheet (phones, or beside the heading on small desktops): the rows stack (name and meta, then the slot beside the action) */
@media (max-width: 599px), (min-width: 1000px) and (max-width: 1199px) {
  .cp-head { display: none; }
  .cp-row { grid-template-columns: 84px minmax(0, 1fr); row-gap: 8px; }
  .cp-ind { grid-column: 1 / -1; }
  .cp-val { height: 30px; }
}
@media (max-width: 599px) {
  .cp-sheet { padding: 14px 14px 4px; }
  .cp-dl { font-size: 16px; }
  .cp-term { grid-template-columns: minmax(0, 1fr); }
  .cp-ref { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px; }
  .cp-card { padding: 10px 11px; }
  .cp-sn { font-size: 13.5px; }
}

/* intro: the sources, their connectors growing down, the definitions, the drop, the sheet and its rows, the readers;
   the dots in the value slots keep waiting */
.js .vz-figure .cp-l, .js .vz-figure .cp-dict, .js .vz-figure .cp-sheet, .js .vz-figure .cp-readers { opacity: 0; transition: opacity .5s ease; }
.js .vz-figure .cp-s { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .cp-s--1 { transition-delay: .1s; }
.js .vz-figure .cp-s--2 { transition-delay: .22s; }
.js .vz-figure .cp-s--3 { transition-delay: .34s; }
.js .vz-figure .cp-s--4 { transition-delay: .46s; }
.js .vz-figure .cp-link i { transform: scaleY(0); transform-origin: top; transition: transform .4s ease .8s; }
.js .vz-figure .cp-dict { transition-delay: 1s; }
.js .vz-figure .cp-down { transform: scaleY(0); transform-origin: top; transition: transform .35s ease 1.35s; }
.js .vz-figure .cp-sheet { transition-delay: 1.55s; }
.js .vz-figure .cp-row { opacity: 0; transform: translateX(-6px); transition: opacity .4s ease, transform .4s ease; }
.js .vz-figure .cp-row--1 { transition-delay: 1.75s; }
.js .vz-figure .cp-row--2 { transition-delay: 1.87s; }
.js .vz-figure .cp-row--3 { transition-delay: 1.99s; }
.js .vz-figure .cp-row--4 { transition-delay: 2.11s; }
.js .vz-figure .cp-readers { transition-delay: 2.4s; }
.js .vz-figure.is-visible .cp-l, .js .vz-figure.is-visible .cp-dict, .js .vz-figure.is-visible .cp-sheet, .js .vz-figure.is-visible .cp-readers { opacity: 1; }
.js .vz-figure.is-visible .cp-s, .js .vz-figure.is-visible .cp-row { opacity: 1; transform: none; }
.js .vz-figure.is-visible .cp-link i, .js .vz-figure.is-visible .cp-down { transform: none; }
.js .vz-figure.is-visible .cp-val i { animation: cp-wait 1.8s ease-in-out 2.6s infinite; }
.js .vz-figure.is-visible .cp-val i:nth-child(2) { animation-delay: 2.9s; }
.js .vz-figure.is-visible .cp-val i:nth-child(3) { animation-delay: 3.2s; }
@keyframes cp-wait { 0%, 60%, 100% { opacity: 1; } 30% { opacity: .25; } }