/* ==================================================
   Concept illustrations (dbeta.co.uk only)
   - HTML/CSS diagrams that replace stock images, in the same visual
     language as the Bones public website.
   - Markup comes from theme/components/concept.php.
   - Everything is sized in em from a container-relative font size,
     so a scene fits whatever slot it is placed in.
================================================== */

.db-concept {
  --cx-card: var(--brand-white);
  --cx-line: rgba(13, 13, 13, 0.08);
  --cx-ink: var(--brand-black);
  --cx-mute: var(--brand-slate);
  --cx-skel: #E7EAEE;
  --cx-blue: var(--brand-blue);
  --cx-blue-soft: rgba(0, 82, 255, 0.08);
  --cx-ok: #3F7D20;
  --cx-ok-bg: #EEF7E6;
  --cx-shadow: 0 0.6em 1.6em rgba(13, 13, 13, 0.08), 0 0.1em 0.3em rgba(13, 13, 13, 0.06);
  container-type: inline-size;
  position: relative;
  width: 100%;
  margin: 0;
}
:root[data-theme="dark"] .db-concept {
  --cx-card: var(--brand-graphite);
  --cx-line: rgba(255, 255, 255, 0.08);
  --cx-ink: var(--brand-white);
  --cx-mute: var(--brand-muted-soft);
  --cx-skel: var(--brand-steel);
  --cx-blue-soft: rgba(125, 162, 255, 0.14);
  --cx-ok: #A9D98A;
  --cx-ok-bg: rgba(169, 217, 138, 0.12);
  --cx-shadow: 0 0.6em 1.6em rgba(0, 0, 0, 0.35);
}

.db-concept__scene {
  position: relative;
  font: normal 400 clamp(10px, 3.8cqw, 19px)/1.3 var(--_font-default);
  color: var(--cx-ink);
  padding: 1.4em 1em;
}
.db-concept__cap {
  margin-top: 0.4rem;
  font: normal 400 1.1rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.6;
}

/* ---------- building blocks ---------- */
.cx-type {
  font: 400 0.72em/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cx-mute);
}
.cx-chip {
  font-size: 0.72em;
  padding: 0.25em 0.7em;
  border-radius: 99em;
  color: var(--cx-ok);
  background: var(--cx-ok-bg);
  border: 1px solid currentColor;
}
.cx-rec,
.cx-win,
.cx-node {
  position: relative;
  z-index: 1;
  background: var(--cx-card);
  border: 1px solid var(--cx-line);
  border-radius: 0.8em;
  box-shadow: var(--cx-shadow);
}
.cx-glow {
  border-color: var(--cx-blue);
  box-shadow: 0 0 0 0.3em var(--cx-blue-soft), var(--cx-shadow);
}
.cx-rec {
  padding: 1em 1.1em;
}
.cx-rec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
}
.cx-rec__name {
  display: block;
  margin: 0.6em 0 0.5em;
  font-weight: 600;
  font-size: 1.15em;
}
.cx-rows {
  display: grid;
  gap: 0.45em;
}
.cx-row {
  display: grid;
  grid-template-columns: 6.5em 1fr;
  align-items: center;
  font-size: 0.85em;
}
.cx-row__k {
  color: var(--cx-mute);
}
.cx-skel {
  display: block;
  height: 0.55em;
  border-radius: 99em;
  background: var(--cx-skel);
}
.cx-skel--short { width: 60%; }
.cx-skel--accent {
  height: 1.3em;
  width: 85%;
  border-radius: 0.3em;
  background: var(--cx-blue-soft);
}
.cx-win {
  overflow: hidden;
}
.cx-win__bar {
  display: flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.5em 0.7em;
  border-bottom: 1px solid var(--cx-line);
}
.cx-win__bar i {
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--cx-skel);
}
.cx-win__bar span {
  margin-left: 0.4em;
  font: 400 0.68em/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  color: var(--cx-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cx-win__body {
  display: grid;
  gap: 0.45em;
  padding: 0.7em;
}
.cx-win__h {
  font-weight: 600;
}
.cx-btn {
  width: 40%;
  height: 1.2em;
  border-radius: 99em;
  background: var(--cx-blue);
}
.cx-code {
  font: 400 0.72em/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--cx-blue);
  background: none;
  padding: 0;
  white-space: nowrap;
}
.cx-check {
  font-size: 0.85em;
}
.cx-check::before {
  content: "✓";
  margin-right: 0.5em;
  color: var(--cx-blue);
  font-weight: 700;
}
.cx-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-top: 0.8em;
}
.cx-link {
  font-size: 0.78em;
  padding: 0.35em 0.8em;
  border-radius: 0.4em;
  color: var(--cx-blue);
  background: var(--cx-card);
  border: 1px solid var(--cx-line);
  box-shadow: var(--cx-shadow);
}
.cx-link::before {
  content: "↳ ";
}

/* wires */
.cx-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.cx-wire {
  fill: none;
  stroke: var(--cx-line);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.cx-wire--on {
  stroke: var(--cx-blue);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: cx-draw 1.2s var(--_animbezier, ease) forwards;
  animation-delay: calc(0.3s + var(--i, 0) * 0.15s);
}
@keyframes cx-draw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-wire--on {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ---------- scene layouts ---------- */

/* one record → several outputs */
.cx-flow {
  display: grid;
}
.cx-flow > .cx-rec {
  width: 72%;
  justify-self: center;
}
.cx-flow > .cx-wires {
  position: relative;
  inset: auto;
  height: 3.6em;
}
.cx-outs .cx-win__bar i {
  display: none;
}
.cx-outs .cx-win__bar span {
  margin-left: 0;
}
.cx-outs {
  display: grid;
  gap: 0.5em;
}
.cx-outs--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* content model */
.cx-model {
  position: relative;
  display: grid;
  gap: 4em;
  padding: 0.5em 0;
}
.cx-node {
  display: grid;
  gap: 0.35em;
  padding: 0.8em 0.9em;
}
.cx-node__name {
  font-weight: 600;
}
.cx-node--main {
  width: 50%;
  justify-self: center;
}
.cx-model__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6em;
}

/* record → template → page */
.cx-stack {
  display: grid;
  justify-items: center;
}
.cx-stack__item {
  width: 78%;
}
.cx-arrow {
  width: 2px;
  height: 1.6em;
  background: var(--cx-blue);
  position: relative;
}
.cx-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.1em;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid var(--cx-blue);
  border-bottom: 2px solid var(--cx-blue);
  transform: translateX(-50%) rotate(45deg);
}

/* people view / machine view */
.cx-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8em;
  align-items: start;
}
.cx-split > .cx-win:last-child {
  margin-top: 2.4em;
}

/* single record card with links */
.cx-card {
  width: 88%;
  margin: 0 auto;
}

/* ---------- placement in existing image slots ---------- */

/* Home: services stack cards (image was a floating 3D object) */
.services-stack__image.has-concept {
  display: flex;
  align-items: center;
  justify-content: center;
}
.services-stack__image.has-concept .db-concept {
  max-width: 46rem;
}
@media only screen and (min-width: 992px) {
  .services-stack__image.has-concept {
    left: auto;
    width: 50% !important;
    padding: 4rem;
  }
}

/* Home: sector cards (image broke out of the card) */
.db-services-cards-s__image.has-concept {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 44rem !important;
  margin: 2.4rem auto 0;
  z-index: 1;
}

/* Feature promo blocks */
.db-features-promo__image.has-concept {
  border-radius: var(--_radius-l);
  background: linear-gradient(160deg, var(--base-tint, #fff), var(--base, #F7F8FA));
  border: 1px solid var(--cx-line, rgba(13, 13, 13, 0.08));
  padding: clamp(1.6rem, 4vw, 4rem);
}

/* engagement timeline */
.cx-timeline {
  display: grid;
  gap: 1.1em;
  padding: 1em 1.1em;
  background: var(--cx-card);
  border: 1px solid var(--cx-line);
  border-radius: 0.8em;
  box-shadow: var(--cx-shadow);
}
.cx-tl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4em 0.8em;
  align-items: center;
}
.cx-tl .cx-type {
  grid-column: 1 / -1;
}
.cx-tl__bar {
  position: relative;
  height: 0.9em;
  border-radius: 99em;
  background: linear-gradient(90deg, transparent calc(var(--s) * 1%), var(--cx-mute) calc(var(--s) * 1%), var(--cx-mute) calc((var(--s) + var(--w)) * 1%), transparent calc((var(--s) + var(--w)) * 1%)), var(--cx-skel);
  opacity: 0.9;
}
.cx-tl__bar--on {
  background: linear-gradient(90deg, transparent calc(var(--s) * 1%), var(--cx-blue) calc(var(--s) * 1%), var(--cx-blue) calc((var(--s) + var(--w)) * 1%), transparent calc((var(--s) + var(--w)) * 1%)), var(--cx-skel);
}
.cx-tl__bar--soft {
  background: linear-gradient(90deg, transparent calc(var(--s) * 1%), var(--cx-blue-soft) calc(var(--s) * 1%)), var(--cx-skel);
  outline: 1px dashed var(--cx-blue);
  outline-offset: -1px;
}
.cx-tl__k {
  font-size: 0.8em;
  color: var(--cx-mute);
  white-space: nowrap;
}

/* concept under a pinned-list intro */
.db-pinned-universal__static .db-concept {
  margin-top: 3.2rem;
  max-width: 46rem;
}

/* ---------- service facts strip ---------- */
.db-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.2rem;
}
.db-facts__item {
  padding: 2.4rem;
  border-radius: var(--_radius-m);
  background: var(--base-tint);
  border: 1px solid var(--neutral-transparent);
}
.db-facts__k {
  display: block;
  margin-bottom: 0.8rem;
  font: 400 1.2rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-medium);
}
.db-facts__v {
  display: block;
  font: normal var(--fw-medium) clamp(2.4rem, 3vw, 3.2rem)/1.15 var(--_font-accent);
  color: var(--t-bright);
}
.db-facts__note {
  display: block;
  margin-top: 0.6rem;
  font-size: 1.5rem;
  color: var(--t-medium);
}

/* ---------- fit / not a fit ---------- */
.db-fit {
  display: grid;
  gap: 1.2rem;
}
@media only screen and (min-width: 992px) {
  .db-fit {
    grid-template-columns: 1fr 1fr;
  }
}
.db-fit__col {
  padding: clamp(2.4rem, 3vw, 4rem);
  border-radius: var(--_radius-l);
  background: var(--base-tint);
  border: 1px solid var(--neutral-transparent);
}
.db-fit__col--no {
  background: transparent;
}
.db-fit__col h3 {
  margin-bottom: 1.6rem;
}
.db-fit__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}
.db-fit__col li {
  position: relative;
  padding-left: 2.8rem;
  color: var(--t-medium);
}
.db-fit__col li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.db-fit__col--no li::before {
  content: "—";
  color: var(--t-medium);
}

/* governance by design: content type → entries */
.cx-gov {
  display: grid;
}
.cx-gov > .cx-win {
  width: 80%;
  justify-self: center;
}
.cx-gov > .cx-wires {
  position: relative;
  inset: auto;
  height: 3em;
}
.cx-outs--3 {
  grid-template-columns: repeat(3, 1fr);
}
.cx-check em {
  float: right;
  font-style: normal;
  font-size: 0.85em;
  color: var(--cx-mute);
}

/* ---------- in-article diagrams (2026-11-01) ---------- */
.db-concept { --cx-warn: #B4532A; }
:root[data-theme="dark"] .db-concept { --cx-warn: #F2A07B; }
.cx-check--no::before { content: "✕"; color: var(--cx-warn); }
.cx-link--no { color: var(--cx-warn); }
.cx-link--no::before { content: "✕ "; }
.cx-lanes { display: grid; gap: 1.4em; }
.cx-lane { display: grid; gap: 0.6em; }
.cx-lane .cx-type { justify-content: flex-start; }
.cx-lane__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45em; }
.cx-step {
  font-size: 0.82em;
  line-height: 1.25;
  padding: 0.6em 0.7em;
  border-radius: 0.5em;
  background: var(--cx-card);
  border: 1px solid var(--cx-line);
  box-shadow: var(--cx-shadow);
}
.cx-step b { display: block; margin-bottom: 0.3em; font: 400 0.8em/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cx-mute); }
.cx-lane--bad .cx-step { border-style: dashed; }
.cx-lane--bad .cx-step b { color: var(--cx-warn); }
.cx-lane--good .cx-step { border-color: var(--cx-blue); }
.cx-lane--good .cx-step b { color: var(--cx-blue); }
.cx-loop { width: 100%; display: grid; gap: 0.6em; padding: 0.8em; border: 1px dashed var(--cx-blue); border-radius: 0.8em; }
.cx-tangle { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2em 1.4em; padding: 0.5em 0; }
.cx-tangle > .cx-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.cx-tangle .cx-node { position: relative; background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: 0.6em; box-shadow: var(--cx-shadow); }
.cx-wire--tangle { stroke: var(--cx-warn); opacity: 0.55; }

/* ---------- case cards: CRM screens (2026-11-02) ---------- */
.cx-crm { width: 100%; }
.cx-crm__body { display: grid; grid-template-columns: 6.4em 1fr; min-height: 11em; }
.cx-crm__side { display: grid; align-content: start; gap: 0.2em; padding: 0.6em 0.4em; border-right: 1px solid var(--cx-line); }
.cx-crm__nav { font-size: 0.7em; padding: 0.35em 0.6em; border-radius: 0.4em; color: var(--cx-mute); white-space: nowrap; }
.cx-crm__nav.is-on { color: var(--cx-blue); background: var(--cx-blue-soft); font-weight: 600; }
.cx-crm__main { display: grid; align-content: start; gap: 0.6em; padding: 0.7em; min-width: 0; }
.cx-pill { justify-self: start; font-size: 0.66em; line-height: 1; padding: 0.3em 0.6em; border-radius: 99em; color: var(--cx-blue); background: var(--cx-blue-soft); white-space: nowrap; }
.cx-pill--ok { color: var(--cx-ok); background: var(--cx-ok-bg); }
.cx-pill--warn { color: var(--cx-warn); background: color-mix(in srgb, var(--cx-warn) 12%, transparent); }
.cx-pill--soft { color: var(--cx-mute); background: var(--cx-skel); }
.cx-skel--num { width: 55%; height: 0.9em; border-radius: 0.25em; background: var(--cx-blue-soft); }
.cx-skel--val { width: 3em; justify-self: end; }
.cx-skel--title { width: 45%; height: 0.8em; }
/* dashboard */
.cx-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4em; }
.cx-tile { display: grid; gap: 0.5em; padding: 0.55em; border: 1px solid var(--cx-line); border-radius: 0.5em; }
.cx-tile .cx-type { font-size: 0.6em; }
.cx-chart { display: grid; gap: 0.5em; padding: 0.55em; border: 1px solid var(--cx-line); border-radius: 0.5em; }
.cx-chart__bars { display: flex; align-items: flex-end; gap: 0.35em; height: 3.4em; }
.cx-chart__bars i { flex: 1; border-radius: 0.2em 0.2em 0 0; background: var(--cx-blue-soft); }
.cx-chart__bars i:last-child { background: var(--cx-blue); }
/* pipeline board */
.cx-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45em; }
.cx-col { display: grid; align-content: start; gap: 0.4em; padding: 0.45em; border-radius: 0.5em; background: color-mix(in srgb, var(--cx-skel) 45%, transparent); }
.cx-col .cx-type { font-size: 0.6em; }
.cx-kcard { display: grid; gap: 0.35em; padding: 0.5em; border-radius: 0.4em; background: var(--cx-card); border: 1px solid var(--cx-line); box-shadow: var(--cx-shadow); }
.cx-col:last-child .cx-kcard:first-of-type { border-color: var(--cx-blue); }
/* table */
.cx-stats { display: flex; gap: 1em; font-size: 0.72em; color: var(--cx-mute); }
.cx-stats b { color: var(--cx-ink); font-weight: 600; }
.cx-table { display: grid; }
.cx-trow { display: grid; grid-template-columns: 1.3fr 1fr 5.5em; align-items: center; gap: 0.6em; padding: 0.45em 0.2em; border-bottom: 1px solid var(--cx-line); }
.cx-trow--head { padding-top: 0; }
.cx-trow--head .cx-type { font-size: 0.58em; }
.cx-trow .cx-skel--short { width: 70%; }
/* portfolio */
.cx-phead { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.cx-pbar { display: flex; gap: 0.2em; height: 0.6em; }
.cx-pbar i { border-radius: 99em; background: var(--cx-blue); }
.cx-pbar i:nth-child(2) { opacity: 0.55; }
.cx-pbar i:nth-child(3) { opacity: 0.25; }
.cx-prow { display: grid; grid-template-columns: 1.4em 1fr auto; align-items: center; gap: 0.6em; padding: 0.35em 0; border-bottom: 1px solid var(--cx-line); }
.cx-cask { width: 1.2em; height: 1.4em; border-radius: 0.35em; border: 1px solid var(--cx-blue); background: repeating-linear-gradient(0deg, transparent 0 0.3em, var(--cx-blue-soft) 0.3em 0.4em); }
/* order stepper */
.cx-stepper { display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 0.2em; }
.cx-sstep { position: relative; display: grid; justify-items: center; gap: 0.4em; font-size: 0.66em; color: var(--cx-mute); }
.cx-sstep b { position: relative; z-index: 1; width: 1.2em; height: 1.2em; border-radius: 50%; border: 2px solid var(--cx-skel); background: var(--cx-card); }
.cx-sstep::before { content: ""; position: absolute; top: 0.55em; left: -50%; width: 100%; height: 2px; background: var(--cx-skel); }
.cx-sstep:first-child::before { display: none; }
.cx-sstep.is-done b { border-color: var(--cx-blue); background: var(--cx-blue); }
.cx-sstep.is-done::before, .cx-sstep.is-now::before { background: var(--cx-blue); }
.cx-sstep.is-now { color: var(--cx-blue); font-weight: 600; }
.cx-sstep.is-now b { border-color: var(--cx-blue); box-shadow: 0 0 0 0.3em var(--cx-blue-soft); }
.cx-note { display: grid; gap: 0.4em; padding: 0.55em; border-radius: 0.5em; border: 1px dashed var(--cx-line); }
/* lead record */
.cx-person { display: grid; grid-template-columns: 2em 1fr auto; align-items: center; gap: 0.6em; padding-bottom: 0.5em; border-bottom: 1px solid var(--cx-line); }
.cx-avatar { width: 2em; height: 2em; border-radius: 50%; background: var(--cx-blue-soft); border: 1px solid var(--cx-blue); }
.cx-person__t { display: grid; gap: 0.35em; }
.cx-acts { display: grid; gap: 0.55em; padding-left: 0.3em; }
.cx-act { position: relative; display: flex; align-items: center; gap: 0.6em; font-size: 0.75em; }
.cx-act b { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--cx-blue); flex: none; }
.cx-act:not(:last-child)::after { content: ""; position: absolute; left: 0.32em; top: 1.1em; height: 0.9em; width: 1px; background: var(--cx-line); }
.cx-act:last-child b { box-shadow: 0 0 0 0.3em var(--cx-blue-soft); }
/* Bones 9 screens (selected work) */
.cx-mtypes { display: flex; flex-wrap: wrap; gap: 0.35em; }
.cx-mtype { font-size: 0.68em; padding: 0.4em 0.7em; border-radius: 0.4em; border: 1px solid var(--cx-line); background: var(--cx-card); box-shadow: var(--cx-shadow); }
.cx-mtype.is-on { border-color: var(--cx-blue); color: var(--cx-blue); box-shadow: 0 0 0 0.25em var(--cx-blue-soft); }
.cx-pubrow { display: grid; grid-template-columns: auto 1.4em 1fr; align-items: center; gap: 0.5em; padding-top: 0.5em; border-top: 1px solid var(--cx-line); }
.cx-arrow-r { height: 1px; background: var(--cx-blue); position: relative; }
.cx-arrow-r::after { content: ""; position: absolute; right: 0; top: -0.2em; border: 0.2em solid transparent; border-left: 0.3em solid var(--cx-blue); border-right: 0; }
.cx-outtags { display: flex; flex-wrap: wrap; gap: 0.3em; }
.cx-outtags span { font: 400 0.58em/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.4em 0.5em; border-radius: 0.3em; color: var(--cx-blue); background: var(--cx-blue-soft); }
.cx-trow--2 { grid-template-columns: 1fr auto; }
.cx-minis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35em; }
.cx-mini { display: grid; gap: 0.45em; padding: 0.5em; border: 1px solid var(--cx-line); border-radius: 0.45em; }
.cx-mini .cx-type { font-size: 0.56em; }
.cx-guard { display: flex; align-items: center; gap: 0.6em; font-size: 0.7em; color: var(--cx-mute); padding-top: 0.5em; border-top: 1px solid var(--cx-line); }
.cx-guard .cx-pill { margin-left: auto; font-size: 0.95em; }
.cx-lock { width: 0.8em; height: 0.65em; margin-top: 0.3em; border-radius: 0.15em; background: var(--cx-blue); position: relative; flex: none; }
.cx-lock::before { content: ""; position: absolute; left: 0.15em; bottom: 100%; width: 0.5em; height: 0.4em; border: 1.5px solid var(--cx-blue); border-bottom: 0; border-radius: 0.3em 0.3em 0 0; }
/* narrow slots (the small Selected work cards): drop the sidebar, scale up */
@container (max-width: 360px) {
  .db-concept .db-concept__scene:has(.cx-crm) { font-size: 5.2cqw; padding: 0; }
  .bl-case-art.bl-case-art:has(.cx-crm) .db-concept .db-concept__scene:has(.cx-crm) { font-size: clamp(9px, min(4.4cqw, 4.6cqh), 19px); }
  .cx-crm__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 0; }
  .cx-crm__side { display: flex; gap: 0.2em; padding: 0.5em 0.8em; border-right: 0; border-bottom: 1px solid var(--cx-line); overflow: hidden; }
}
/* Bones portal and console, denser for tall card slots */
.cx-panel { display: grid; gap: 0.55em; padding: 0.7em; border: 1px solid var(--cx-line); border-radius: 0.6em; background: var(--cx-card); box-shadow: var(--cx-shadow); }
.cx-panel--soft { box-shadow: none; opacity: 0.75; }
.cx-kv { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; font-size: 0.85em; }
.cx-kv .cx-type { font-size: 0.72em; }
.cx-kv .cx-skel--val { width: 4em; }
.cx-faces { display: flex; }
.cx-faces i { width: 1.2em; height: 1.2em; margin-left: -0.35em; border-radius: 50%; background: var(--cx-blue-soft); border: 1px solid var(--cx-blue); }
.cx-minis--2 { grid-template-columns: repeat(2, 1fr); }
.cx-thread { display: grid; gap: 0.6em; }
.cx-msg { display: grid; gap: 0.4em; width: 82%; padding: 0.6em 0.7em; border-radius: 0.6em 0.6em 0.6em 0.15em; border: 1px solid var(--cx-line); background: var(--cx-card); }
.cx-msg .cx-type { font-size: 0.6em; }
.cx-msg--us { justify-self: end; border-radius: 0.6em 0.6em 0.15em 0.6em; border-color: transparent; background: var(--cx-blue-soft); }
.cx-msg--us .cx-type { color: var(--cx-blue); }
.cx-closed { display: flex; justify-content: center; }

/* ---------- home "Three steps" cards (2026-11-03) ---------- */
/* each step is one full-bleed screen: title bar, then a body spread over the height */
.cx-step { display: flex; flex-direction: column; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.cx-step .cx-win__bar { min-height: 2.6em; padding: 0 1.2em; }
.cx-step .cx-win__body { flex: 1; min-height: 0; align-content: space-evenly; gap: 0.4em; padding: 0.6em 1.4em 1em; }

/* step 1: sitemap and user journey */
.cx-plan__label { font-size: 0.62em; }
.cx-plan__home { display: flex; justify-content: center; }
.cx-plan .cx-wires { position: relative; inset: auto; width: 100%; height: 1.6em; margin: -0.4em 0; }
.cx-plan__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5em; }
.cx-page {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0.6em 0.4em;
  font-size: 0.75em;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  background: var(--cx-card);
  border: 1px solid var(--cx-line);
  border-radius: 0.5em;
  box-shadow: var(--cx-shadow);
}
.cx-plan__home .cx-page { min-width: 30%; }
.cx-page.is-on { border-color: var(--cx-blue); box-shadow: 0 0 0 0.25em var(--cx-blue-soft), var(--cx-shadow); }
.cx-trail { display: flex; align-items: center; justify-content: space-between; gap: 0.9em; }
.cx-trail span {
  position: relative;
  flex: 1;
  padding: 0.5em 0.2em;
  font-size: 0.68em;
  text-align: center;
  white-space: nowrap;
  color: var(--cx-mute);
  border: 1px dashed var(--cx-line);
  border-radius: 99em;
}
.cx-trail span + span::before {
  content: "\2192";
  position: absolute;
  left: -1.15em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cx-blue);
}
.cx-trail .is-on { color: var(--cx-blue); border: 1px solid var(--cx-blue); background: var(--cx-blue-soft); }

/* step 1: organisation structure map (2026-11-03) */
.cx-org { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5em; }
.cx-org__col { position: relative; display: grid; align-content: start; gap: 0.3em; }
.cx-org__col::before { content: ""; position: absolute; left: 0.5em; top: 1.6em; bottom: 0.7em; width: 1px; background: var(--cx-line); }
.cx-org__kid {
  position: relative;
  margin-left: 1.77em;
  padding: 0.3em 0.45em;
  font-size: 0.62em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--cx-mute);
  border: 1px solid var(--cx-line);
  border-radius: 0.4em;
  background: var(--cx-card);
}
.cx-org__kid::before { content: ""; position: absolute; left: -0.97em; top: 50%; width: 0.97em; height: 1px; background: var(--cx-line); }

/* step 2: the installation (after the Bones 9 portal's installation panel) */
.cx-install .cx-kv { padding-bottom: 0.45em; border-bottom: 1px solid var(--cx-line); }
.cx-install .cx-kv:last-child { padding-bottom: 0; border-bottom: 0; }
.cx-install .cx-kv__v { font-weight: 600; }
.cx-install .cx-phead .cx-skel--title { width: 35%; }

/* step 3: audit log after launch (after the Bones 9 Core audit log) */
.cx-audit .cx-win__body { gap: 0.45em; }
.cx-audit__row {
  display: grid;
  gap: 0.3em;
  padding: 0.55em 0.8em;
  border: 1px solid var(--cx-line);
  border-radius: 0.6em;
  opacity: 0.7;
}
.cx-audit__row.is-on { opacity: 1; border-color: var(--cx-blue); box-shadow: 0 0 0 0.25em var(--cx-blue-soft); }
.cx-audit__text { font-size: 0.8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-audit__text strong { font-weight: 600; margin-right: 0.2em; }
.cx-audit__meta { display: flex; justify-content: space-between; gap: 0.6em; font: 400 0.6em/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cx-mute); }
.cx-audit__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; margin-top: 0.2em; }
.cx-audit__foot .cx-chip { white-space: nowrap; }
.cx-audit__btn { font-size: 0.68em; padding: 0.3em 0.9em; border: 1px solid var(--cx-line); border-radius: 99em; color: var(--cx-mute); }

/* ---------- home Bones benefit tiles (2026-11-03) ---------- */
.cx-gonce > .cx-rec { width: 66%; }
.cx-gonce > .cx-wires { height: 2em; }
.cx-gval { font-size: 0.66em; font-weight: 600; color: var(--cx-blue); white-space: nowrap; }
.cx-gread { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; align-items: center; }
.cx-gread__out { display: grid; gap: 0.5em; }
.cx-gread .cx-code { font-size: 0.66em; }
.cx-gdesign { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.5em; align-items: center; }
.cx-gdesign__swap { color: var(--cx-blue); font-size: 1.2em; }
.cx-gdesign__cap { display: block; margin-top: 0.8em; text-align: center; font-size: 0.62em; }
.cx-gtheme--a .cx-win { --cx-card: #fff; --cx-ink: #0d0d0d; --cx-skel: #E7EAEE; --cx-line: rgba(13,13,13,.1); color: #0d0d0d; }
.cx-gtheme--b .cx-win { --cx-card: #16181d; --cx-ink: #fff; --cx-skel: #2c3038; --cx-line: rgba(255,255,255,.1); --cx-mute: #9aa1ad; color: #fff; }
.cx-gtheme--b .cx-btn { border-radius: 0.2em; }
.cx-ggrow { width: 80%; margin: 0 auto; }
.cx-grow { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; font-size: 0.85em; font-weight: 600; padding-bottom: 0.45em; border-bottom: 1px solid var(--cx-line); }
.cx-grow--new { padding: 0.45em 0.6em; border: 1px dashed var(--cx-blue); border-radius: 0.5em; color: var(--cx-blue); }
.cx-grow .cx-chip { font-weight: 400; }
/* Bones 9 timeline steps (2026-11-03) */
.cx-gpanel { width: 84%; margin: 0 auto; }
.cx-gpanel .cx-win__body { gap: 0.55em; padding: 0.8em 1em; }
.cx-gpanel .cx-kv__v { font-weight: 600; }
.cx-gfoot { display: flex; align-items: center; gap: 0.6em; margin-top: 0.2em; }
.cx-gcap { display: block; margin-top: 0.2em; font-size: 0.6em; text-align: center; }
.cx-glang { display: flex; align-items: center; gap: 0.7em; padding: 0.5em 0.7em; font-size: 0.85em; border: 1px solid var(--cx-line); border-radius: 0.5em; }
.cx-glang b { font: 600 0.75em/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cx-mute); }
.cx-glang.is-on { border-color: var(--cx-blue); box-shadow: 0 0 0 0.2em var(--cx-blue-soft); }
.cx-glang.is-on b { color: var(--cx-blue); }
.cx-gadd { padding: 0.45em; font-size: 0.75em; text-align: center; color: var(--cx-blue); border: 1px dashed var(--cx-blue); border-radius: 0.5em; }
.cx-gsec { display: grid; gap: 0.4em; padding: 0.5em 0.7em; border: 1px solid var(--cx-line); border-radius: 0.5em; }
.cx-gsec.is-on { border-color: var(--cx-blue); background: var(--cx-blue-soft); }
.cx-gmini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; }
.cx-gmini i { height: 1.8em; border-radius: 0.3em; background: var(--cx-card); border: 1px solid var(--cx-line); }
.cx-gmedia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4em; }
.cx-gmedia i { aspect-ratio: 4 / 3; border-radius: 0.35em; background: linear-gradient(135deg, var(--cx-skel), var(--cx-blue-soft)); }
.cx-gmedia i.is-on { outline: 2px solid var(--cx-blue); outline-offset: 1px; }
.cx-gdiff { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.cx-gdiff > span { display: grid; gap: 0.3em; padding: 0.5em 0.7em; font-size: 0.85em; font-weight: 600; border: 1px solid var(--cx-line); border-radius: 0.5em; text-decoration: line-through; color: var(--cx-mute); }
.cx-gdiff > span.is-on { text-decoration: none; color: var(--cx-ink); border-color: var(--cx-blue); background: var(--cx-blue-soft); }
.cx-gdiff .cx-type { text-decoration: none; display: block; }
.cx-gmods { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.cx-gmods > span { display: grid; gap: 0.5em; justify-items: start; padding: 0.7em; font-size: 0.85em; font-weight: 600; border: 1px dashed var(--cx-line); border-radius: 0.6em; }
.cx-gmods > span.is-on { border-style: solid; border-color: var(--cx-blue); background: var(--cx-blue-soft); }
.cx-gfoot .cx-arrow-r { flex: 1; }
/* "Why Bones sites last" scenes (2026-11-03) */
.cx-wzero--blank .cx-win__body { min-height: 7em; place-items: center; border: 1px dashed var(--cx-line); margin: 0.5em; border-radius: 0.4em; }
.cx-wzero__empty { font-size: 0.7em; color: var(--cx-mute); }
.cx-org--3 { grid-template-columns: repeat(3, 1fr); }
.cx-org__kid--new { color: var(--cx-blue); border: 1px dashed var(--cx-blue); background: var(--cx-blue-soft); }
.cx-wlayers { display: grid; gap: 0.45em; width: 80%; margin: 0 auto; }
.cx-wlayer { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 0.7em 0.9em; font-size: 0.85em; background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: 0.6em; box-shadow: var(--cx-shadow); }
.cx-wlayer b { font-weight: 600; }
.cx-wlayer .cx-type { font-size: 0.7em; }
.cx-wlayer.is-on { border-color: var(--cx-blue); box-shadow: 0 0 0 0.25em var(--cx-blue-soft), var(--cx-shadow); transform: translateX(0.6em); }
.cx-wlayer.is-base { background: var(--cx-blue-soft); border-color: transparent; box-shadow: none; }

/* ---------- home X-ray layers (2026-11-03): typical site beside a Bones site ---------- */
.cx-xvs { box-sizing: border-box; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9em; height: 100%; padding: 1em 1.2em; color: var(--cx-ink); }
.cx-xside { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--cx-line); border-radius: 0.8em; background: var(--cx-card); }
.cx-xside--bad { border-style: dashed; background: transparent; }
.cx-xside--good { border-color: var(--cx-blue); box-shadow: 0 0 0 0.25em var(--cx-blue-soft); }
.cx-xside__h { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6em; padding: 0.65em 0.9em; border-bottom: 1px solid var(--cx-line); }
.cx-xside__h b { flex: none; font-size: 0.82em; font-weight: 600; }
.cx-xside--bad .cx-xside__h b { color: var(--cx-warn); }
.cx-xside--good .cx-xside__h b { color: var(--cx-blue); }
.cx-xside__h span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 0.6em/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cx-mute); }
.cx-xside__b { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: 0.3em; padding: 0.5em 0.9em; }
.cx-xside__f { padding: 0.6em 0.9em; font-size: 0.74em; font-weight: 500; border-top: 1px solid var(--cx-line); }
.cx-xside--bad .cx-xside__f { color: var(--cx-warn); }
.cx-xside--good .cx-xside__f { color: var(--cx-blue); }
.cx-xr { display: flex; align-items: center; gap: 0.5em; min-width: 0; padding-left: calc(var(--lv, 0) * 1.1em); font-size: 0.8em; white-space: nowrap; }
.cx-xr__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cx-xr .cx-pill { flex: none; margin-left: auto; font-size: 0.78em; padding: 0.35em 0.7em; }
.cx-xr__mark { flex: none; width: 1em; font-style: normal; font-weight: 700; text-align: center; }
.cx-xr--ok .cx-xr__mark::before { content: "\2713"; color: var(--cx-blue); }
.cx-xr--warn .cx-xr__mark::before { content: "!"; color: var(--cx-warn); }
.cx-xr--todo .cx-xr__mark::before { content: "\25CB"; color: var(--cx-mute); }
.cx-xr--on .cx-xr__mark::before { content: "\2192"; color: var(--cx-blue); }
.cx-xr--plain .cx-xr__mark::before { content: "\00B7"; color: var(--cx-mute); }
.cx-xr--todo .cx-xr__t { color: var(--cx-mute); }
.cx-xr--on .cx-xr__t { color: var(--cx-blue); font-weight: 600; }

/* B-52 fix-or-rebuild diagram: two outcomes side by side (2026-11-03). */
.cx-outs--2 { grid-template-columns: repeat(2, 1fr); }
/* Lane steps keep their boxes: the later .cx-step rule (step windows) strips the border
   and shadow, which also flattened the lanes in art-lifecycle and art-eng-gates. */
.cx-lane .cx-step { display: block; height: auto; border: 1px solid var(--cx-line); border-radius: 0.5em; box-shadow: var(--cx-shadow); }
.cx-lane--bad .cx-step { border-style: dashed; }
.cx-lane--good .cx-step { border-color: var(--cx-blue); }
/* B-52 diagrams: status rows inside a window, code in mono (2026-11-03). */
.cx-annot .cx-win__body { display: grid; gap: 0.55em; }
.cx-xr code { font: 400 0.92em/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cx-ink); }
.cx-annot .cx-btn, .db-concept--art-vibe-loop .cx-btn { justify-self: end; margin-top: 0.2em; }
.db-concept--art-vibe-loop .cx-win__body { display: grid; gap: 0.55em; }
.db-concept--art-vibe-loop .cx-msg { font-size: 0.78em; line-height: 1.35; }
.cx-annot .cx-btn, .db-concept--art-vibe-loop .cx-btn { width: auto; height: auto; padding: 0.45em 1.1em; font-size: 0.72em; font-weight: 600; line-height: 1; color: #fff; }
.db-concept .cx-xr code { padding: 0; border: 0; border-radius: 0; background: none; font-size: 0.92em; color: var(--cx-ink); }
.db-concept--topic-aidi-json .cx-msg { font-size: 0.78em; line-height: 1.35; }
.db-concept--topic-aidi-json .cx-code { white-space: normal; }

/* BONES-3R: portal card shows real (fictional) ticket text in the minis */
.db-concept--card-bones-portal .cx-mini{font-size:.8em;line-height:1.35}
.db-concept--card-bones-portal .cx-mini .cx-type{font-size:.7em}
.db-concept--card-bones-portal .cx-mini .cx-pill{justify-self:start;align-self:start}