/* CCX Kanban - the production board of the process tools landing page.
 *
 * Everything here hangs off html.ccx-kanban-on, which assets/ccx-kanban.js
 * sets once it has cut the chips into cards. A browser that runs no script
 * therefore keeps exactly the board that shipped before this file existed:
 * the page stylesheet of the landing page still owns the chips and nothing
 * below ever fires. The one exception is the panel width at the very bottom,
 * which corrects an overflow that exists with or without the script.
 *
 * The page stylesheet lives in the Elementor page settings and its rules read
 * .elementor-<id> .cclp-col .ccstep, which is three classes. Every rule here
 * that has to win over one of those carries four classes and the html element
 * in front of it, so it wins on specificity without a single !important.
 *
 * Colour is the design system: navy #0b1227 as the ground, rgb(44,51,76) as
 * the frame of anything that reads as a card, #ff8e2b as the one accent, and
 * white only where a card is genuinely a piece of paper lying on the panel.
 *
 * The detail panel is written to the end of the document rather than into the
 * board, so that no container of the landing page can clip it or take its
 * place away. Its rules are therefore scoped to html.ccx-kanban-on alone.
 */

html.ccx-kanban-on .cclp-kanban {
  /* the panel reads as its own surface, a shade richer than the section it
   * stands on, and the fill is a gradient so the lower half sinks away */
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.045) 0%,
    rgba(255, 255, 255, 0.012) 62%,
    rgba(255, 255, 255, 0.008) 100%);
  box-shadow: 0 24px 60px rgba(3, 8, 22, 0.34);
}

/* --------------------------------------------------------------- head row
 *
 * Title on the left, the note about the figures on the right, on one line.
 * The container is an Elementor flex column, so the two headings are turned
 * into the first row of a grid and everything under them spans both columns.
 */

html.ccx-kanban-on .cclp-kanban.cclp-kanban {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  row-gap: 20px;
  column-gap: 24px;
}
html.ccx-kanban-on .cclp-kanban > .elementor-element { grid-column: 1 / -1; }
html.ccx-kanban-on .cclp-kanban > .elementor-element:nth-child(1) { grid-column: 1; }
html.ccx-kanban-on .cclp-kanban > .elementor-element:nth-child(2) { grid-column: 2; }

html.ccx-kanban-on .cclp-kanban > .elementor-element:nth-child(2) .elementor-heading-title {
  font-size: 13px;
  line-height: 18px;
  text-align: right;
  color: rgba(255, 255, 255, 0.42);
}
html.ccx-kanban-on .cclp-kanban > .elementor-element:nth-child(2) {
  width: auto;
  max-width: 340px;
}

/* the title shares its line with the pill that says the board can be touched;
 * on a narrow screen the pill drops under the title instead of squeezing it */
html.ccx-kanban-on .cclp-kanban > .elementor-element:nth-child(1) > .elementor-widget-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 13px;
}

/* ----------------------------------------------------------- the invitation
 *
 * A quiet glass pill with the pulsing dot of the site in it. It says what to
 * do until it has been done once, then it fades and is gone for the visit.
 */

html.ccx-kanban-on .cclp-kanban .cckb-hint {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 5px 13px 5px 11px;
  border: 1px solid rgba(255, 142, 43, 0.3);
  border-radius: 999px;
  background-image: linear-gradient(180deg,
    rgba(255, 142, 43, 0.16) 0%,
    rgba(255, 142, 43, 0.06) 100%);
  box-shadow: 0 0 18px rgba(255, 142, 43, 0.1);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  line-height: 17px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.28, 1);
  --ccfx-dot-size: 6px;
  --ccfx-dot-color: #ff8e2b;
  --ccfx-dot-glow: rgba(255, 142, 43, 0.8);
  --ccfx-dot-gap: 7px;
  --ccfx-dot-speed: 2.4s;
}
html.ccx-kanban-on .cclp-kanban .cckb-hint.cckb-hint-out {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

/* ------------------------------------------------------------ key figures
 *
 * Four framed tiles instead of four columns divided by a hair line. The
 * divider the page stylesheet draws between them is taken back, because a
 * frame and a divider next to each other read as two systems.
 */

html.ccx-kanban-on .cclp-kanban .cclp-stats.cclp-stats {
  gap: 14px;
}
html.ccx-kanban-on .cclp-kanban .cclp-stats .cclp-stat {
  padding: 12px 15px 13px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 13px;
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.045) 0%,
    rgba(255, 255, 255, 0.014) 100%);
  row-gap: 1px;
}
html.ccx-kanban-on .cclp-kanban .cclp-stats .cclp-stat + .cclp-stat::before { content: none; }

/* the value and the label are spans, so their boxes are line boxes with the
 * leading of the font on top. Made blocks they are exactly their line height,
 * which is what keeps the tile as flat as the printed one. */
html.ccx-kanban-on .cclp-kanban .cclp-stat .elementor-heading-title { display: block; }

html.ccx-kanban-on .cclp-kanban .cclp-stat .cclp-statn .elementor-heading-title {
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #ffffff;
}
/* the unit stands beside the value in the accent, at the weight of the value
 * and two thirds of its size, which is the relation the brochure uses */
html.ccx-kanban-on .cclp-kanban .cclp-stat .cckb-unit {
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0;
  color: #ff8e2b;
  margin-left: 6px;
}
html.ccx-kanban-on .cclp-kanban .cclp-stat > .elementor-widget:not(.cclp-statn) .elementor-heading-title {
  font-size: 13px;
  line-height: 17px;
  color: rgba(255, 255, 255, 0.5);
}

/* ----------------------------------------------------------- column heads
 *
 * Small capitals, and the count as a bare orange number pushed to the right
 * edge of the column. The pill the page stylesheet puts around it competed
 * with the pills on the cards below.
 */

html.ccx-kanban-on .cclp-kanban .cclp-col .cclp-coln .elementor-heading-title {
  color: rgba(255, 255, 255, 0.56);
  padding-bottom: 9px;
}
html.ccx-kanban-on .cclp-kanban .cclp-col .cclp-coln em {
  margin-left: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #ff8e2b;
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0;
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.28, 1.2);
}
html.ccx-kanban-on .cclp-kanban .cclp-col .cclp-coln em.cckb-bump {
  transform: scale(1.34);
}

/* ------------------------------------------------------------- card stack
 *
 * The heading that used to hold the chips is the list now. It keeps a floor
 * so an emptied column still offers somewhere to drop, and it is the element
 * the script measures when it works out where a dragged card would land.
 */

html.ccx-kanban-on .cclp-kanban .cclp-col .ccchips .elementor-heading-title {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-height: 84px;
  position: relative;
}
html.ccx-kanban-on .cclp-kanban .cclp-col .ccchips { width: 100%; }

/* the whole column is the drop area, not only the stack, so a card released
 * anywhere over the column lands in it. */
html.ccx-kanban-on .cclp-kanban .cclp-board .cclp-col {
  border-radius: 14px;
}

/* THE LANE (round twenty seven)
 *
 * Until now a column had no shape of its own at rest and borrowed one from the
 * effect layer under the pointer: a warm light ran around its edge. On four
 * columns full of white paper that read as decoration rather than as four
 * places a card can be put down, so the light is gone and the shape is drawn
 * here instead, plainly and once.
 *
 * It is drawn OUTSIDE the column box. The cards fill the width of their column
 * exactly, which is what keeps a long description on one line down to the
 * narrowest desktop width, so a line on the box itself would run along the
 * edge of the white cards. Five pixels to each side puts it in the sixteen
 * that separate two columns and leaves six between two lanes, and the card
 * geometry is not touched at all.
 *
 * On the ::before of the column and not the ::after, because a pseudo element
 * that comes before the content of a positioned box paints under that content:
 * the lane lies behind its cards without a stacking context and without a
 * negative z-index, which on a box with no background of its own would put it
 * behind the panel. Elementor gives every container a ::before of its own with
 * a width, a height and a transform, all of which are taken back here.
 *
 * From 1025px only. Below it the four columns stand under one another, a card
 * cannot be dragged anywhere, and four frames would be four claims about
 * something a visitor there cannot do. */
@media (min-width: 1025px) {
  html.ccx-kanban-on .cclp-kanban .cclp-board .cclp-col::before {
    content: "";
    position: absolute;
    left: -5px;
    right: -5px;
    top: -8px;
    bottom: -8px;
    width: auto;
    height: auto;
    min-width: 0;
    max-width: none;
    border: 0;
    transform: none;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.018);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.075);
    pointer-events: none;
    transition: background-color 0.22s ease, box-shadow 0.22s ease;
  }

  /* the lane a card would land in. One clean line in the accent and a warmth
   * behind it, and nothing blurred: the mark of a drop target has to be an
   * edge that is either there or not, not a halo that could be anywhere. The
   * slot inside the lane stays the brightest thing on the board. */
  html.ccx-kanban-on .cclp-kanban .cclp-board .cclp-col.cckb-over::before {
    background-color: rgba(255, 142, 43, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 142, 43, 0.55);
    transition: background-color 0.14s ease, box-shadow 0.14s ease;
  }
}

/* ------------------------------------------------------------------ cards
 *
 * White paper on the dark panel. The job number carries the card, the
 * description sits under it in grey, and the day pill stands on the right.
 */

html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card {
  font-style: normal;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(11, 18, 39, 0.09);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(3, 8, 22, 0.3);
  white-space: normal;
  text-align: left;
  /* a card is a control, so a press on it never turns into a text selection
   * and never waits for a second tap. Round 31: it is also held long enough to
   * be picked up, which is exactly the press iOS answers with its own offer to
   * copy what is under the finger. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.28s ease,
              transform 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
}
html.ccx-kanban-on .cclp-kanban.cckb-draggable .cclp-col .cckb-card { touch-action: pan-y; }

html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card .cckb-text {
  display: block;
  min-width: 0;
}
html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card .cckb-id {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  line-height: 19px;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: #0b1227;
}
html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card .cckb-desc {
  display: block;
  margin-top: 1px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12.5px;
  line-height: 17px;
  font-weight: 500;
  color: #6a7387;
}

html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card .cckb-pill,
html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card .cckb-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
}
html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card .cckb-pill {
  background: #eef1f7;
  border: 1px solid rgba(11, 18, 39, 0.07);
  color: #414c63;
}
html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card .cckb-badge {
  background-image: linear-gradient(180deg, #ff8e2b 0%, #ce5904 100%);
  border: 1px solid rgba(255, 142, 43, 0.5);
  color: #ffffff;
  box-shadow: 0 1px 8px rgba(255, 142, 43, 0.32);
  /* the pulsing dot of the site, in white on the filled badge */
  --ccfx-dot-size: 6px;
  --ccfx-dot-color: rgba(255, 255, 255, 0.95);
  --ccfx-dot-glow: rgba(255, 255, 255, 0.75);
  --ccfx-dot-gap: 6px;
  --ccfx-dot-speed: 2.2s;
}

/* --------------------------------------------------------------- the offer
 *
 * A card has to look like it can be picked up before anybody tries. Under the
 * pointer it lifts off the panel and its frame warms, and the cursor is the
 * open hand wherever a card can actually be moved.
 */

html.ccx-kanban-on .cclp-kanban.cckb-draggable .cclp-col .cckb-card { cursor: grab; }
html.ccx-kanban-on .cclp-kanban:not(.cckb-draggable) .cclp-col .cckb-card { cursor: pointer; }

@media (hover: hover) {
  html.ccx-kanban-on .cclp-kanban:not(.cckb-dragging) .cclp-col .cckb-card:hover:not(.cckb-lift):not(.cckb-settle) {
    transform: translateY(-3px);
    border-color: rgba(11, 18, 39, 0.15);
    box-shadow: 0 12px 24px rgba(3, 8, 22, 0.42), 0 1px 2px rgba(3, 8, 22, 0.3);
  }
}

/* the finger gets its own answer: a card presses in instead of lifting */
@media (max-width: 1024px) {
  html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card:active {
    transform: scale(0.982);
    box-shadow: 0 1px 2px rgba(3, 8, 22, 0.3), 0 0 0 2px rgba(255, 142, 43, 0.35);
  }
}

html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card:focus-visible {
  outline: 2px solid #ff8e2b;
  outline-offset: 2px;
}

/* one short push of the top card towards its neighbour when the board first
 * arrives, so that the movement is shown rather than described */
@keyframes cckb-nudge {
  0%   { transform: none; box-shadow: 0 1px 2px rgba(3, 8, 22, 0.3); }
  20%  { transform: translate(8px, -4px) rotate(0.5deg); box-shadow: 0 14px 26px rgba(3, 8, 22, 0.46), 0 1px 2px rgba(3, 8, 22, 0.3); }
  56%  { transform: translate(8px, -4px) rotate(0.5deg); box-shadow: 0 14px 26px rgba(3, 8, 22, 0.46), 0 1px 2px rgba(3, 8, 22, 0.3); }
  100% { transform: none; box-shadow: 0 1px 2px rgba(3, 8, 22, 0.3); }
}
html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card.cckb-nudge {
  animation: cckb-nudge 1.3s cubic-bezier(0.3, 0.8, 0.35, 1) 0.15s 1;
  z-index: 6;
}

/* ----------------------------------------------------------------- moving
 *
 * The lifted card leaves the flow of its column untouched: it keeps its slot
 * there and only its own painting moves, so nothing under the pointer shifts
 * while the pointer is down.
 *
 * Exactly ONE place on the board is lit while a card is in the air. Aim at a
 * column and that is the slot which opens there; aim at the place the card
 * already holds, or leave the board altogether, and it is the empty place the
 * card came from, because letting go there is what puts it back. Neither of
 * them is drawn with a dashed line: an empty place is a recess in the panel,
 * a live place is the same recess filled with the accent.
 */

html.ccx-kanban-on .cclp-kanban.cckb-dragging {
  -webkit-user-select: none;
  user-select: none;
  cursor: grabbing;
}
html.ccx-kanban-on .cclp-kanban.cckb-draggable.cckb-dragging .cclp-col .cckb-card { cursor: grabbing; }

html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card.cckb-lift {
  z-index: 40;
  transition: box-shadow 0.18s ease;
  box-shadow: 0 22px 40px rgba(3, 8, 22, 0.52), 0 2px 6px rgba(3, 8, 22, 0.4);
}
/* the card that is being carried leaves a recess where it came from, drawn on
 * its own slot rather than by taking the card out of the flow, which would
 * reflow the column under the pointer */
/* Round 31: while the card still lies exactly over the place it came from, that
 * place is not shown. The two are drawn on the same pixels then - the recess is
 * the ::before of the card, put back by the inverse of what the card carries -
 * and a recess painted through a white card turns the whole card its colour.
 * The script hands out cckb-away as soon as the card has travelled more than
 * four pixels. A pointer gets it in the same frame it lifts a card, because a
 * mouse only lifts one after six pixels; a finger lifts it where it rests. */
html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card.cckb-lift:not(.cckb-away)::before {
  opacity: 0;
}
html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card.cckb-lift::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(255, 255, 255, 0.028);
  box-shadow: inset 0 1px 4px rgba(3, 8, 22, 0.45);
  /* the inverse of what the card carries, in the inverse order, so the recess
   * stays exactly where the card came from */
  transform: rotate(calc(var(--cckb-tilt, 0deg) * -1)) translate(calc(var(--cckb-dx, 0px) * -1), calc(var(--cckb-dy, 0px) * -1));
  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  pointer-events: none;
  z-index: -1;
}
/* letting go now would put the card back, so its own place is the live one */
html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card.cckb-lift.cckb-athome::before {
  border-color: rgba(255, 142, 43, 0.36);
  background-color: rgba(255, 142, 43, 0.1);
  box-shadow: inset 0 1px 4px rgba(3, 8, 22, 0.34), 0 0 22px rgba(255, 142, 43, 0.12);
  animation: cckb-live 1.9s ease-in-out infinite;
}

html.ccx-kanban-on .cclp-kanban .cckb-slot {
  display: block;
  flex: 0 0 auto;
  height: var(--cckb-slot-h, 56px);
  border-radius: 12px;
  border: 1px solid rgba(255, 142, 43, 0.36);
  background-image: linear-gradient(180deg,
    rgba(255, 142, 43, 0.15) 0%,
    rgba(255, 142, 43, 0.06) 100%);
  box-shadow: inset 0 1px 4px rgba(3, 8, 22, 0.34), 0 0 22px rgba(255, 142, 43, 0.12);
  animation: cckb-slot-in 0.22s cubic-bezier(0.2, 0.9, 0.28, 1.18) both,
             cckb-live 1.9s ease-in-out 0.22s infinite;
}
@keyframes cckb-slot-in {
  from { opacity: 0; transform: scaleY(0.62); }
  to   { opacity: 1; transform: scaleY(1); }
}
/* the shimmer that says this is where it goes */
@keyframes cckb-live {
  0%, 100% { box-shadow: inset 0 1px 4px rgba(3, 8, 22, 0.34), 0 0 16px rgba(255, 142, 43, 0.09); }
  50%      { box-shadow: inset 0 1px 4px rgba(3, 8, 22, 0.34), 0 0 30px rgba(255, 142, 43, 0.2); }
}

/* on the way to its new place the card stays over its neighbours, and it does
 * not run past the place it is going to */
html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card.cckb-settle { z-index: 30; }

/* --------------------------------------------------------------- entrance
 *
 * The board arrives once, when it first comes into view: the figures count up
 * and the cards come in column by column.
 */

html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card.cckb-enter {
  opacity: 0;
  transform: translateY(10px);
}
html.ccx-kanban-on .cclp-kanban.cckb-in .cclp-col .cckb-card.cckb-enter {
  opacity: 1;
  transform: none;
  transition: opacity 0.42s ease, transform 0.52s cubic-bezier(0.2, 0.9, 0.28, 1.12);
  transition-delay: calc(var(--cckb-i, 0) * var(--cckb-step, 55ms));
}

/* ------------------------------------------------------------------ small
 *
 * The four columns stand under one another below 768 and two by two up to
 * 1024. The look is the same, only the note above the board moves back under
 * the title where there is no room beside it.
 *
 * Round 31: a card can be moved here too, by holding it or by taking hold of
 * its handle. What that needs of the stylesheet is at the foot of this file,
 * under "round 31", because it has to be written AFTER the rules it warms and
 * widens.
 */

@media (max-width: 1024px) {
  html.ccx-kanban-on .cclp-kanban.cclp-kanban {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }
  html.ccx-kanban-on .cclp-kanban > .elementor-element:nth-child(1),
  html.ccx-kanban-on .cclp-kanban > .elementor-element:nth-child(2) { grid-column: 1; }
  html.ccx-kanban-on .cclp-kanban > .elementor-element:nth-child(2) {
    max-width: none;
  }
  html.ccx-kanban-on .cclp-kanban > .elementor-element:nth-child(2) .elementor-heading-title {
    text-align: left;
  }
  html.ccx-kanban-on .cclp-kanban .cclp-stats.cclp-stats { gap: 12px; }
  html.ccx-kanban-on .cclp-kanban .cclp-col .ccchips .elementor-heading-title { min-height: 0; }
}

@media (max-width: 767px) {
  html.ccx-kanban-on .cclp-kanban .cclp-stat .cclp-statn .elementor-heading-title {
    font-size: 25px;
    line-height: 32px;
  }
  html.ccx-kanban-on .cclp-kanban .cclp-stats .cclp-stat { padding: 12px 14px; }
  html.ccx-kanban-on .cclp-kanban .cclp-stats .cclp-stat + .cclp-stat::before { content: none; }
  html.ccx-kanban-on .cclp-kanban .cckb-hint {
    white-space: normal;
    line-height: 16px;
    /* round 31: the line got longer, because it now names a gesture as well as
     * a tap. Wrapping alone does not fit it: a flex item that may not shrink
     * keeps the width of its longest line whatever the wrapping says, and the
     * pill stood 15px past the right edge of a 375 window. */
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
  }
  html.ccx-kanban-on .cclp-kanban .cckb-hint .cckb-hint-t { min-width: 0; }
}

/* ============================================================= the panel
 *
 * What one card holds when a system stands behind it. It is written to the
 * end of the document, so it cannot be clipped by any container of the page
 * and its place is measured against the window. On a wide screen it is pinned
 * beside its card with a caret pointing at it; from 1024px down it rises from
 * the bottom edge over the full width, which is where a hand can reach it.
 */

html.ccx-kanban-on .cckb-pop-veil {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(4, 9, 22, 0);
  transition: background-color 0.26s ease;
}
html.ccx-kanban-on .cckb-pop-veil.is-sheet { background: rgba(4, 9, 22, 0.55); }

html.ccx-kanban-on .cckb-pop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1201;
  width: 346px;
  max-width: calc(100vw - 24px);
  padding: 18px 18px 15px;
  border: 1px solid rgba(11, 18, 39, 0.1);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 30px 70px rgba(3, 8, 22, 0.55), 0 4px 14px rgba(3, 8, 22, 0.3);
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #0b1227;
  animation: cckb-pop-in 0.22s cubic-bezier(0.2, 0.9, 0.28, 1.04) both;
}
html.ccx-kanban-on .cckb-pop,
html.ccx-kanban-on .cckb-pop * { box-sizing: border-box; }
@keyframes cckb-pop-in {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* the caret that ties the panel to its card */
html.ccx-kanban-on .cckb-pop::before {
  content: "";
  position: absolute;
  top: var(--cckb-caret, 40px);
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: #ffffff;
  border: 1px solid rgba(11, 18, 39, 0.1);
  transform: rotate(45deg);
}
html.ccx-kanban-on .cckb-pop[data-side="right"]::before {
  left: -7px;
  border-right: 0;
  border-top: 0;
}
html.ccx-kanban-on .cckb-pop[data-side="left"]::before {
  right: -7px;
  border-left: 0;
  border-bottom: 0;
}
html.ccx-kanban-on .cckb-pop[data-side="none"]::before,
html.ccx-kanban-on .cckb-pop.is-sheet::before { content: none; }

html.ccx-kanban-on .cckb-pop-x {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #f1f4f9;
  color: #5a6478;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
html.ccx-kanban-on .cckb-pop-x svg { width: 12px; height: 12px; display: block; }
html.ccx-kanban-on .cckb-pop-x:hover { background: #e5eaf3; color: #0b1227; }
html.ccx-kanban-on .cckb-pop-x:focus-visible { outline: 2px solid #ff8e2b; outline-offset: 2px; }

html.ccx-kanban-on .cckb-pop-top {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 34px;
}
html.ccx-kanban-on .cckb-pop-num {
  font-size: 12px;
  line-height: 17px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #ff8e2b;
}
html.ccx-kanban-on .cckb-pop-state {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1px solid rgba(11, 18, 39, 0.08);
  border-radius: 999px;
  background: #eef1f7;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  color: #414c63;
}

html.ccx-kanban-on .cckb-pop-title {
  margin: 7px 0 3px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 19px;
  line-height: 25px;
  font-weight: 700;
  letter-spacing: -0.008em;
  color: #0b1227;
}
html.ccx-kanban-on .cckb-pop-meta {
  margin: 0 0 15px;
  font-size: 12px;
  line-height: 17px;
  font-weight: 500;
  color: #7b849a;
}
html.ccx-kanban-on .cckb-pop-lab {
  margin: 0 0 10px;
  font-size: 11.5px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #99a2b5;
}

html.ccx-kanban-on .cckb-pop-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
html.ccx-kanban-on .cckb-pop-step {
  position: relative;
  margin: 0;
  padding: 0 0 13px 21px;
  list-style: none;
}
html.ccx-kanban-on .cckb-pop-step:last-child { padding-bottom: 0; }
/* the rail between two stations */
html.ccx-kanban-on .cckb-pop-step::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: 1px;
  width: 1px;
  background: rgba(11, 18, 39, 0.16);
}
html.ccx-kanban-on .cckb-pop-step:last-child::before { content: none; }

html.ccx-kanban-on .cckb-pop-dot {
  position: absolute;
  left: 0;
  top: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #cfd5e2;
  background: #ffffff;
}
html.ccx-kanban-on .cckb-pop-step.is-done .cckb-pop-dot {
  border-color: #ff8e2b;
  background: #ff8e2b;
}
html.ccx-kanban-on .cckb-pop-step.is-run .cckb-pop-dot {
  border-color: #ff8e2b;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 142, 43, 0.18);
}

html.ccx-kanban-on .cckb-pop-sname {
  display: block;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: #0b1227;
}
html.ccx-kanban-on .cckb-pop-step.is-wait .cckb-pop-sname { color: #8c95a8; }
html.ccx-kanban-on .cckb-pop-swhen {
  display: block;
  font-size: 11.5px;
  line-height: 16px;
  font-weight: 500;
  color: #7b849a;
}

html.ccx-kanban-on .cckb-pop-times {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}
html.ccx-kanban-on .cckb-pop-t {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 11px 9px;
  border: 1px solid rgba(11, 18, 39, 0.09);
  border-radius: 11px;
  background: #f7f9fc;
}
html.ccx-kanban-on .cckb-pop-k {
  display: block;
  font-size: 11px;
  line-height: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #7b849a;
}
html.ccx-kanban-on .cckb-pop-v {
  display: block;
  font-size: 15px;
  line-height: 21px;
  font-weight: 700;
  color: #0b1227;
}

html.ccx-kanban-on .cckb-pop-bar {
  margin-top: 9px;
  height: 6px;
  border-radius: 999px;
  background: #e8ecf4;
  overflow: hidden;
}
html.ccx-kanban-on .cckb-pop-bar > i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background-image: linear-gradient(90deg, #ff8e2b 0%, #ce5904 100%);
  transition: width 0.55s cubic-bezier(0.2, 0.9, 0.28, 1);
}
html.ccx-kanban-on .cckb-pop-bar.is-over > i {
  background-image: linear-gradient(90deg, #ff7a1f 0%, #b8290f 100%);
}

html.ccx-kanban-on .cckb-pop-note {
  margin: 13px 0 0;
  padding: 9px 11px 10px;
  border: 1px solid rgba(255, 142, 43, 0.32);
  border-radius: 11px;
  background: rgba(255, 142, 43, 0.09);
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 500;
  color: #7c4211;
}
html.ccx-kanban-on .cckb-pop-foot {
  margin: 13px 0 0;
  font-size: 11px;
  line-height: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #a7aebd;
}

/* the sheet: full width at the bottom edge, clear of the mobile call bar */
html.ccx-kanban-on .cckb-pop.is-sheet {
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: none;
  max-height: 84vh;
  overflow-y: auto;
  padding: 20px 18px calc(20px + var(--ccx-mobcta-lift, 0px));
  border-width: 1px 0 0;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 50px rgba(3, 8, 22, 0.5);
  animation: cckb-sheet-in 0.26s cubic-bezier(0.2, 0.9, 0.28, 1.02) both;
}
@keyframes cckb-sheet-in {
  from { transform: translateY(26px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* the grip that says this came up from the edge */
html.ccx-kanban-on .cckb-pop.is-sheet::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 38px;
  height: 4px;
  margin-left: -19px;
  border-radius: 999px;
  background: rgba(11, 18, 39, 0.14);
}
html.ccx-kanban-on .cckb-pop.is-sheet .cckb-pop-top { padding-top: 8px; }

/* ----------------------------------------------------------------- calmer
 *
 * Under reduced motion the board is built, can still be dragged and still
 * opens, because that is the point of it, but nothing moves on its own: no
 * counting up, no staggered arrival, no nudge, no shimmer, and a card lands
 * where it is put without the travel.
 */

@media (prefers-reduced-motion: reduce) {
  html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card,
  html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card.cckb-lift::before,
  html.ccx-kanban-on .cclp-kanban .cclp-col .cclp-coln em,
  html.ccx-kanban-on .cclp-kanban .cckb-hint,
  html.ccx-kanban-on .cclp-kanban .cckb-slot,
  html.ccx-kanban-on .cckb-pop,
  html.ccx-kanban-on .cckb-pop-veil,
  html.ccx-kanban-on .cckb-pop-bar > i {
    transition: none !important;
    animation: none !important;
  }
  html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card.cckb-enter {
    opacity: 1;
    transform: none;
  }
  /* the bar still shows its figure, it simply arrives at it: the width the
   * script writes onto the element is what is left once the run is off */
}

/* ------------------------------------------------------------------
 * Round 15, main agent: the panel is a fixed 1120px container in the
 * page data, which overflows the window between 1025 and ~1150px
 * (reported identically by three agents, pre-existing on live). Cap it
 * at the parent width; the fixed figure stays the upper bound. Not
 * gated on html.ccx-kanban-on: the overflow exists without the script
 * as well.
 * ------------------------------------------------------------------ */
.cclp-kanban{max-width:100%;}

/* ==========================================================================
 * ROUND 20 - the board answers, and the four figures are part of it
 *
 * Three things were asked for. The containers of the board should carry a
 * warm rim that answers the pointer and a cool light that follows it inside.
 * The four key figures should stop being print and become part of the
 * demonstration. And the board should say more clearly that it can be
 * touched, because the invitation was there and easy to miss.
 *
 * The rim and the light are the shared effect layer of the site: a class is
 * handed to the four figures at runtime by inc/ccx-kanban.php, and the engine
 * injects two decorative spans into each host. Nothing is written into the
 * page data for it.
 *
 * ROUND 27 TOOK THE COLUMNS BACK OUT OF THIS. They carried the same rim, and a
 * light running around the edge of a column full of white paper reads as
 * decoration rather than as a place a card can be put down. A column is a
 * plain lane now, drawn further up, and the only thing that lights while a
 * card is in the air is the place it would land. Everything below applies to
 * the four figures alone.
 *
 * The two colours are deliberately different. The rim is the accent of the
 * site, and the light inside is a blue a shade lighter than the one every
 * other card on the site uses, so that the warm outline and the cool light
 * do not fight over the same tone.
 * ========================================================================== */

/* The two colours, in one place. The rim is #ff8e2b written as its own hue,
 * so the engine can mix the whole family of shadows out of it; the light is
 * lighter and cooler than the 212 of the rest of the site. */
.cclp-kanban .cckb-rim {
  --gc-h: 28;
  --gc-s: 100%;
  --gc-l: 58%;
  --cckb-lit-h: 206;
  --cckb-lit-s: 96%;
  --cckb-lit-l: 74%;
  --gc-spot: hsl(var(--cckb-lit-h) var(--cckb-lit-s) var(--cckb-lit-l) / 15%);
  --gc-soft: hsl(var(--cckb-lit-h) var(--cckb-lit-s) var(--cckb-lit-l) / 5%);
  /* the rim lies a little outside its host, so the host may not clip */
  overflow: visible;
}
/* The distance the halo keeps: the figures stand fourteen pixels apart. The
 * corner is repeated here rather than left to the rules further up, because
 * the rim takes its shape from its host and those rules only exist once the
 * script has run: should the script ever fail while the effect layer does not,
 * the ring still follows a rounded box. */
.cclp-kanban .cclp-stat.cckb-rim { --gc-pad: 12px; border-radius: 13px; }

/* The rim itself: one clean hairline on the edge of the tile and a halo
 * outside it, and nothing washing inwards. The factory setting also throws
 * five inset shadows up to fifteen pixels into the box, which is more than a
 * tile this size can carry without the wash reaching its figure. */
.cclp-kanban .cckb-rim > .mmrb-glowcard__edge::before {
  box-shadow:
    inset 0 0 0 1px var(--gc-ring),
    0 0 2px 0 hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 62%),
    0 0 6px 0 hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 46%),
    0 0 16px 0 hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 30%),
    0 0 34px 2px hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 17%),
    0 0 62px 4px hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 8%);
}

/* WHEN A FIGURE LIGHTS, AND HOW MUCH
 *
 * A tile lights while the pointer is inside it, and only then. The engine
 * measures a hundred and fifty pixels of approach, which is ten times the
 * fourteen between two figures: on approach all four would answer at once and
 * the row would read as a light show rather than as four places that each do
 * something.
 *
 * The engine's own figure runs from nought in the middle of a box to a
 * hundred at its edge, which on its own means the rim goes out exactly where
 * the pointer is resting. It is used as the second half of the strength
 * instead: the rim is always plainly there while the pointer is in the tile,
 * and it grows towards whichever side the pointer is on. The wedge of the mask
 * does the rest, since it already points at the pointer. */
.cclp-kanban .cclp-stat.cckb-rim > .mmrb-glowcard__edge {
  opacity: 0;
  transition: opacity 0.28s ease-out;
}
.cclp-kanban .cclp-stat.cckb-rim:hover > .mmrb-glowcard__edge,
.cclp-kanban .cclp-stat.cckb-rim:focus-visible > .mmrb-glowcard__edge {
  opacity: calc(0.42 + var(--edge-proximity) * 0.005);
}

/* THE LIGHT INSIDE FOLLOWS THE POINTER, AND THE KEYBOARD
 *
 * A key figure is a control in its own right and keeps the light when it is
 * reached with the keyboard, where nothing else would say where one is. */
.cclp-kanban .cclp-stat.cckb-rim:not(:hover):not(:focus-visible) > .mmrb-glowcard__fill { opacity: 0; }

/* WHICH COLUMN MAY PAINT OVER ITS NEIGHBOURS
 *
 * A carried card is lifted to a z-index of forty inside its column, and a
 * column is a positioned box: while the card travels, the column it came from
 * has to stand over the ones beside it, or a neighbour would paint across the
 * card halfway through. The lift is given for exactly as long as it is needed
 * and taken back 760ms after the drop, once the card has settled. */
html.ccx-kanban-on .cclp-kanban .cclp-board .cclp-col.cckb-hot { z-index: 50; }

/* ------------------------------------------------------------ the figures
 *
 * Each of the four is a control now. It says what it is drawn from, it counts
 * how many of the jobs on the board it is drawn from at this moment, and it
 * marks them. Move a card and the count moves with it, which is the whole
 * point: the figures are not a picture next to the board, they are read off
 * it.
 */

html.ccx-kanban-on .cclp-kanban .cclp-stat {
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1),
              border-color 0.22s ease, background-color 0.22s ease;
}
@media (hover: hover) {
  html.ccx-kanban-on .cclp-kanban .cclp-stat:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 142, 43, 0.34);
  }
}
html.ccx-kanban-on .cclp-kanban .cclp-stat:focus-visible {
  outline: 2px solid #ff8e2b;
  outline-offset: 3px;
}
html.ccx-kanban-on .cclp-kanban .cclp-stat.cckb-stat-on {
  border-color: rgba(255, 142, 43, 0.5);
  background-image: linear-gradient(180deg,
    rgba(255, 142, 43, 0.1) 0%,
    rgba(255, 142, 43, 0.03) 100%);
}

/* the mark in the corner that says there is something to open here */
html.ccx-kanban-on .cclp-kanban .cclp-stat .cckb-statmark {
  position: absolute;
  top: 11px;
  right: 12px;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.5);
  opacity: 0.75;
  transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease,
              transform 0.28s cubic-bezier(0.2, 0.9, 0.28, 1.1);
  pointer-events: none;
}
html.ccx-kanban-on .cclp-kanban .cclp-stat .cckb-statmark svg {
  width: 8px;
  height: 8px;
  display: block;
}
html.ccx-kanban-on .cclp-kanban .cclp-stat:hover .cckb-statmark,
html.ccx-kanban-on .cclp-kanban .cclp-stat:focus-visible .cckb-statmark {
  opacity: 1;
  color: #ff8e2b;
  border-color: rgba(255, 142, 43, 0.5);
}
html.ccx-kanban-on .cclp-kanban .cclp-stat.cckb-stat-on .cckb-statmark {
  opacity: 1;
  color: #ff8e2b;
  border-color: rgba(255, 142, 43, 0.55);
  background: rgba(255, 142, 43, 0.12);
  transform: rotate(180deg);
}
/* the value line keeps clear of the mark */
html.ccx-kanban-on .cclp-kanban .cclp-stat .cclp-statn { padding-right: 22px; }

/* what the figure is drawn from, and how much of the board that is right now */
html.ccx-kanban-on .cclp-kanban .cclp-stat .cckb-statlens {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11.5px;
  line-height: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
  transition: max-height 0.3s cubic-bezier(0.2, 0.9, 0.28, 1),
              opacity 0.22s ease,
              margin-top 0.3s cubic-bezier(0.2, 0.9, 0.28, 1);
}
html.ccx-kanban-on .cclp-kanban .cclp-stat.cckb-stat-on .cckb-statlens {
  max-height: 76px;
  opacity: 1;
  margin-top: 7px;
}
html.ccx-kanban-on .cclp-kanban .cclp-stat .cckb-statsep { opacity: 0.42; }
html.ccx-kanban-on .cclp-kanban .cclp-stat .cckb-statcount {
  color: #ff8e2b;
  font-weight: 700;
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.28, 1.2);
  display: inline-block;
}
html.ccx-kanban-on .cclp-kanban .cclp-stat .cckb-statcount.cckb-bump { transform: scale(1.3); }

/* a figure whose set of jobs has just changed says so for a moment, even
 * when it is not the one that is open: that is the link between the board
 * and the numbers above it, shown rather than claimed */
@keyframes cckb-tick {
  0%, 100% { box-shadow: none; border-color: rgba(255, 255, 255, 0.11); }
  22%      { box-shadow: 0 0 22px rgba(255, 142, 43, 0.26); border-color: rgba(255, 142, 43, 0.55); }
  62%      { box-shadow: 0 0 22px rgba(255, 142, 43, 0.14); border-color: rgba(255, 142, 43, 0.34); }
}
html.ccx-kanban-on .cclp-kanban .cclp-stat.cckb-stat-tick:not(.cckb-stat-on) {
  animation: cckb-tick 1.1s ease-in-out 1;
}

/* the board under an open figure: the jobs it counts keep their light, the
 * rest step back. While a card is being carried the stepping back is lifted,
 * because a card in the air has to stay readable. */
html.ccx-kanban-on .cclp-kanban.cckb-lens .cclp-col .cckb-card {
  transition: box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.28s ease,
              transform 0.24s cubic-bezier(0.2, 0.8, 0.3, 1), filter 0.28s ease;
}
html.ccx-kanban-on .cclp-kanban.cckb-lens:not(.cckb-dragging) .cclp-col .cckb-card:not(.cckb-lit) {
  opacity: 0.4;
  filter: saturate(0.55);
}
html.ccx-kanban-on .cclp-kanban.cckb-lens .cclp-col .cckb-card.cckb-lit {
  border-color: rgba(255, 142, 43, 0.85);
  box-shadow: 0 0 0 2px rgba(255, 142, 43, 0.55), 0 10px 22px rgba(3, 8, 22, 0.44);
}
html.ccx-kanban-on .cclp-kanban.cckb-lens .cclp-board .cclp-col.cckb-lit-col .cclp-coln .elementor-heading-title {
  color: rgba(255, 255, 255, 0.86);
}
html.ccx-kanban-on .cclp-kanban.cckb-lens:not(.cckb-dragging) .cclp-board .cclp-col:not(.cckb-lit-col) .cclp-coln .elementor-heading-title {
  opacity: 0.5;
}

/* ------------------------------------------------------- a clearer offer
 *
 * The invitation was a pill, a lift and one push of the top card, and it was
 * easy to miss. The pill is louder now, it names both things a visitor can
 * do, and the push comes back twice while nobody has taken it up. And every
 * card carries the grip a thing that can be picked up carries, which is the
 * one signal that is there before any pointer arrives.
 */

html.ccx-kanban-on .cclp-kanban .cckb-hint {
  padding: 6px 14px 6px 12px;
  font-size: 12.5px;
  line-height: 18px;
  border-color: rgba(255, 142, 43, 0.44);
  background-image: linear-gradient(180deg,
    rgba(255, 142, 43, 0.24) 0%,
    rgba(255, 142, 43, 0.09) 100%);
  color: rgba(255, 255, 255, 0.92);
  animation: cckb-hint-breathe 3.4s ease-in-out infinite;
}
@keyframes cckb-hint-breathe {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 142, 43, 0.08); }
  50%      { box-shadow: 0 0 26px rgba(255, 142, 43, 0.26); }
}
/* the gesture, drawn once at the end of the line: two arrows apart, which is
 * what the hand is being asked to do */
html.ccx-kanban-on .cclp-kanban .cckb-hint .cckb-hint-g {
  flex: 0 0 auto;
  display: block;
  width: 15px;
  height: 11px;
  margin-left: 8px;
  color: #ff8e2b;
}
html.ccx-kanban-on .cclp-kanban .cckb-hint .cckb-hint-g svg { width: 15px; height: 11px; display: block; }

/* THE GRIP (round twenty seven)
 *
 * It was six dots of one pixel in a pale grey at just over half strength, and
 * on white paper that is close to nothing: a visitor who did not already know
 * the cards could be picked up had no reason to try. It is a handle now, which
 * is the shape everything that gets carried by hand has: a rail let into the
 * left edge of the card with the dot matrix in the middle of it, so the eye
 * sees a place to take hold of before it sees a pattern.
 *
 * It costs no width. The rail sits inside the seventeen pixels of padding the
 * card already had for the old dots, and it is a child element rather than a
 * pseudo element because the ::before of a card is the empty place it leaves
 * behind while it is being carried, and the rail needs its own ::before for
 * the dots.
 *
 * Only from 1025px, and only while the board actually accepts a drag. Below
 * that the way into a card is opening it, and a handle drawn on something that
 * cannot be dragged is a promise the board does not keep. */
html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card .cckb-grip { display: none; }

@media (min-width: 1025px) {
  html.ccx-kanban-on .cclp-kanban.cckb-draggable .cclp-col .cckb-card { padding-left: 17px; }

  html.ccx-kanban-on .cclp-kanban.cckb-draggable .cclp-col .cckb-card .cckb-grip {
    display: block;
    position: absolute;
    left: 3px;
    top: 5px;
    bottom: 5px;
    width: 11px;
    border-radius: 6px;
    background-color: rgba(11, 18, 39, 0.075);
    pointer-events: none;
    transition: background-color 0.2s ease;
  }
  /* two columns of three, exactly: the box is two tiles wide and three tall,
   * so the pattern cannot run past its own edge */
  html.ccx-kanban-on .cclp-kanban.cckb-draggable .cclp-col .cckb-card .cckb-grip::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 16.8px;
    margin: -8.4px 0 0 -4.5px;
    background-image: radial-gradient(circle, currentColor 1.3px, transparent 1.6px);
    background-size: 4.5px 5.6px;
    color: #6f7a90;
    transition: color 0.2s ease;
  }

  /* under the pointer the handle warms with the card that is lifting under it,
   * and it does the same while the card is actually being carried */
  @media (hover: hover) {
    html.ccx-kanban-on .cclp-kanban:not(.cckb-dragging).cckb-draggable .cclp-col .cckb-card:hover .cckb-grip {
      background-color: rgba(255, 142, 43, 0.16);
    }
    html.ccx-kanban-on .cclp-kanban:not(.cckb-dragging).cckb-draggable .cclp-col .cckb-card:hover .cckb-grip::before {
      color: #ce5904;
    }
  }
  html.ccx-kanban-on .cclp-kanban.cckb-draggable .cclp-col .cckb-card.cckb-lift .cckb-grip {
    background-color: rgba(255, 142, 43, 0.2);
  }
  html.ccx-kanban-on .cclp-kanban.cckb-draggable .cclp-col .cckb-card.cckb-lift .cckb-grip::before {
    color: #ce5904;
  }
}

@media (max-width: 767px) {
  html.ccx-kanban-on .cclp-kanban .cclp-stat .cckb-statmark { top: 12px; right: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html.ccx-kanban-on .cclp-kanban .cclp-stat,
  html.ccx-kanban-on .cclp-kanban .cclp-stat .cckb-statmark,
  html.ccx-kanban-on .cclp-kanban .cclp-stat .cckb-statlens,
  html.ccx-kanban-on .cclp-kanban .cclp-stat .cckb-statcount,
  html.ccx-kanban-on .cclp-kanban.cckb-lens .cclp-col .cckb-card,
  html.ccx-kanban-on .cclp-kanban .cckb-hint,
  html.ccx-kanban-on .cclp-kanban .cclp-board .cclp-col::before,
  html.ccx-kanban-on .cclp-kanban.cckb-draggable .cclp-col .cckb-card .cckb-grip,
  html.ccx-kanban-on .cclp-kanban.cckb-draggable .cclp-col .cckb-card .cckb-grip::before {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================== round 31
 *
 * A CARD CAN BE MOVED WITH A FINGER.
 *
 * Until this round the board was a picture on a phone: the handle was hidden,
 * dragging was switched off from 1025px down, and the only way in was opening a
 * card. The reason given at the time was a real one - the four columns stand
 * under one another there, so carrying a card is a mostly VERTICAL pull, which
 * is the gesture the page is scrolled with, and a board that swallowed it would
 * take scrolling away from the visitors who need it most.
 *
 * The answer is not to give the gesture up but to decide whose it is before it
 * starts, and there are two places that decision can be made:
 *
 *   THE HANDLE decides in the browser. It is the one part of a card that says
 *   touch-action:none, so a touch that begins on the rail is never considered
 *   for a scroll, and the card comes up at once. That is why the rail had to
 *   grow: a decision that is made by where the finger lands only works if the
 *   place it has to land on can be hit. It is 22 wide and as tall as the card
 *   allows, and its ::after stretches the part that answers a touch to 45 by 57,
 *   which is over the 44 both platform guides ask for.
 *
 *   THE CARD decides in time. A finger that travels at once is scrolling and
 *   keeps the page; a finger that rests for --cckb-hold is picking the card up.
 *   The ring that grows under it for exactly that long is the whole of the
 *   feedback: it says a wait is running and roughly how much of it is left.
 *
 * WHAT ROCKS, AND WHY. On a wide board a carried card leans into the direction
 * it is being pulled, and that lean is what says it is in a hand rather than
 * stuck to the page. A board that stands in one column is pulled up and down,
 * so there is no lean to be had - which is exactly what was missing here. A
 * card carried by a finger therefore rocks on its own, written into the same
 * tilt the recess behind it already counters, and the one push that shows the
 * gesture at the start pushes UPWARDS on a narrow screen, towards the column
 * the card would go to, instead of sideways towards nothing.
 */

/* how long the wait is, so that the ring under a held card and the clock in the
 * script are the same length. The script writes the real figure on the board. */
html.ccx-kanban-on .cclp-kanban { --cckb-hold: 380ms; }

/* the ring that grows while a card is being held */
@keyframes cckb-press {
  from { transform: scale(1);     box-shadow: 0 1px 2px rgba(3, 8, 22, 0.3), 0 0 0 0 rgba(255, 142, 43, 0); }
  to   { transform: scale(0.977); box-shadow: 0 1px 2px rgba(3, 8, 22, 0.3), 0 0 0 3px rgba(255, 142, 43, 0.5); }
}
html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card.cckb-press {
  animation: cckb-press var(--cckb-hold, 380ms) cubic-bezier(0.3, 0.1, 0.5, 1) forwards;
}

/* The card is in a hand. It stands further off the panel than one carried by a
 * pointer, because a finger covers most of it and the shadow is what is left to
 * see, and it takes a thin warm line on its own edge.
 *
 * That line is deliberately QUIETER than the place the card would land: the rule
 * of this board is that exactly one place carries the accent while a card
 * travels, and a ring as bright as the slot would make two. Measured against the
 * slot, which draws its edge at .36 over a filled and shimmering recess: 1.5px
 * at .30, no fill, no glow. What actually says the card is held is the shadow
 * and the handle warming under the thumb - both of them ON the card, where the
 * hand already is, and neither of them anywhere a card could be put down. */
html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card.cckb-lift.cckb-hand {
  box-shadow: 0 26px 46px rgba(3, 8, 22, 0.6),
              0 0 0 1.5px rgba(255, 142, 43, 0.3),
              0 2px 6px rgba(3, 8, 22, 0.4);
}

/* the push that shows the gesture, upwards where the columns stand under one
 * another. It is the same one push, in the direction that means something. */
@keyframes cckb-nudge-v {
  0%   { transform: none; box-shadow: 0 1px 2px rgba(3, 8, 22, 0.3); }
  22%  { transform: translateY(-9px) rotate(-0.7deg); box-shadow: 0 16px 28px rgba(3, 8, 22, 0.48), 0 1px 2px rgba(3, 8, 22, 0.3); }
  58%  { transform: translateY(-9px) rotate(0.7deg);  box-shadow: 0 16px 28px rgba(3, 8, 22, 0.48), 0 1px 2px rgba(3, 8, 22, 0.3); }
  100% { transform: none; box-shadow: 0 1px 2px rgba(3, 8, 22, 0.3); }
}

@media (max-width: 1024px) {
  /* room for the rail, measured: a card is 305 wide at 375 and the description
   * of the longest job stays on one line with this much taken off the front */
  html.ccx-kanban-on .cclp-kanban.cckb-draggable .cclp-col .cckb-card { padding-left: 34px; }

  html.ccx-kanban-on .cclp-kanban.cckb-draggable .cclp-col .cckb-card .cckb-grip {
    display: block;
    position: absolute;
    left: 5px;
    top: 4px;
    bottom: 4px;
    width: 22px;
    border-radius: 7px;
    background-color: rgba(11, 18, 39, 0.075);
    /* the rail has to BE the target of the touch, or the browser would read
     * the touch-action of the card underneath it and keep the right to scroll */
    pointer-events: auto;
    touch-action: none;
    transition: background-color 0.2s ease;
  }
  /* two columns of three, one quarter larger than on a desktop: a dot that can
   * be seen from arm's length on a phone is not the same size as one read at
   * a screen's distance */
  html.ccx-kanban-on .cclp-kanban.cckb-draggable .cclp-col .cckb-card .cckb-grip::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11.2px;
    height: 21px;
    margin: -10.5px 0 0 -5.6px;
    background-image: radial-gradient(circle, currentColor 1.6px, transparent 1.95px);
    background-size: 5.6px 7px;
    color: #6f7a90;
    transition: color 0.2s ease;
  }
  /* what a thumb actually has to hit: 45 by 57, which is over the 44 both
   * platform guides ask for. It is transparent and it is the reason the rail
   * itself can stay slim enough not to crowd the job number. */
  html.ccx-kanban-on .cclp-kanban.cckb-draggable .cclp-col .cckb-card .cckb-grip::after {
    content: "";
    position: absolute;
    left: -5px;
    right: -18px;
    top: -4px;
    bottom: -4px;
  }

  /* THE HANDLE ANSWERS IN THREE STEPS, and all three have to live here: the
   * rule that paints the rail at rest sits in this block, so a warming rule of
   * the same weight written above it would simply be overwritten. While the
   * clock runs the rail warms a little, and it warms fully once the card is up
   * or while the push is showing what to do. */
  html.ccx-kanban-on .cclp-kanban.cckb-draggable .cclp-col .cckb-card.cckb-press .cckb-grip {
    background-color: rgba(255, 142, 43, 0.14);
  }
  html.ccx-kanban-on .cclp-kanban.cckb-draggable .cclp-col .cckb-card.cckb-press .cckb-grip::before {
    color: #b8551f;
  }
  html.ccx-kanban-on .cclp-kanban.cckb-draggable .cclp-col .cckb-card.cckb-lift .cckb-grip,
  html.ccx-kanban-on .cclp-kanban.cckb-draggable .cclp-col .cckb-card.cckb-nudge .cckb-grip {
    background-color: rgba(255, 142, 43, 0.2);
  }
  html.ccx-kanban-on .cclp-kanban.cckb-draggable .cclp-col .cckb-card.cckb-lift .cckb-grip::before,
  html.ccx-kanban-on .cclp-kanban.cckb-draggable .cclp-col .cckb-card.cckb-nudge .cckb-grip::before {
    color: #ce5904;
  }


  /* The older flat answer to a touch, .cckb-card:active, needs no switching off
   * and must not be given any: it weighs five classes, the carried card weighs
   * six, and the ring under a held card is an ANIMATION, which outranks every
   * plain declaration whatever its weight. A rule written to silence it would
   * have been the one thing able to take the shadow off a card in the hand. */
}

/* ONLY WHERE THE COLUMNS REALLY STAND UNDER ONE ANOTHER, which is below 768 and
 * not below 1025: measured, the board is two by two between 768 and 1024, so the
 * first move a card makes there is sideways after all, and both the push and the
 * drawn gesture stay pointing the way they always did. */
@media (max-width: 767px) {
  html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card.cckb-nudge {
    animation-name: cckb-nudge-v;
  }

  /* the double arrow at the end of the pill draws the gesture, and on a stacked
   * board the gesture is up and down. The glyph is symmetrical, so a quarter
   * turn is the whole change; the box is squared up for it, or the turned arrow
   * would be cut off at its ends. */
  html.ccx-kanban-on .cclp-kanban .cckb-hint .cckb-hint-g {
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
  }
  html.ccx-kanban-on .cclp-kanban .cckb-hint .cckb-hint-g svg {
    transform: rotate(90deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ccx-kanban-on .cclp-kanban .cclp-col .cckb-card.cckb-press {
    animation: none !important;
    box-shadow: 0 1px 2px rgba(3, 8, 22, 0.3), 0 0 0 3px rgba(255, 142, 43, 0.5);
  }
}

/* rv:20260907a cache refresh */