/* Article-local visualization styles for /compare/hotjar-vs-microsoft-clarity/. Loaded through article_stylesheet metadata. */

.cf-fig {
  --a: #16408f;
  --b: #0f6b6b;
  --c: #7a4b12;
  --h: #17693f;
  margin: 38px 0;
  padding: 34px 36px 32px;
  border: 1px solid #cfdcf0;
  border-radius: 20px;
  background: #f4f7fb;
  color: #071b3a;
}

h3.cf-h {
  margin: 0 0 26px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #071b3a;
}

p.cf-note {
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: #4b5b76;
  text-wrap: pretty;
}

.cf-card {
  padding: 24px 26px 26px;
  border: 1px solid #d7e2f2;
  border-radius: 16px;
  background: #fff;
}

p.cf-name {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

p.cf-role {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.45;
  color: #4b5b76;
  text-wrap: pretty;
}

.cf-a p.cf-name { color: var(--a); }
.cf-b p.cf-name { color: var(--b); }
.cf-c p.cf-name { color: var(--c); }
.cf-hy p.cf-name { color: var(--h); }

.cf-a { border-top: 4px solid var(--a); }
.cf-b { border-top: 4px solid var(--b); }
.cf-c { border-top: 4px solid var(--c); }
.cf-hy { border-top: 4px solid var(--h); }

/* shared chip set */

.cf-set {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cf-set span {
  padding: 7px 14px;
  border-radius: 999px;
  background: #f4f7fb;
  box-shadow: inset 0 0 0 1px #dfe7f3;
  font-size: 15px;
  color: #33465f;
}

.cf-card .cf-set span {
  background: #f4f7fb;
}

/* ---------- archetype: two-pole spectrum ---------- */

.cf-spectrum {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 14px;
}

.cf-pole {
  padding: 24px 26px 26px;
  border: 1px solid #d7e2f2;
  border-radius: 16px;
  background: #fff;
}

.cf-pole--a { border-top: 4px solid var(--a); }
.cf-pole--b { border-top: 4px solid var(--b); }

.cf-overlap {
  padding: 24px 26px 26px;
  border: 1px dashed #b0bdcd;
  border-radius: 16px;
  background: #eef2f8;
}

p.cf-overlap__t {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: #33465f;
}

.cf-overlap .cf-set span {
  background: #fff;
  box-shadow: inset 0 0 0 1px #cfdcf0;
}

.cf-axis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid #dfe7f3;
  font-size: 15px;
  font-weight: 600;
  color: #4b5b76;
}

.cf-axis span:last-child { text-align: right; }

/* ---------- archetype: three-way ---------- */

.cf-triangle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.cf-triangle--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- archetype: numbered flow ---------- */

.cf-flow {
  display: grid;
  gap: 22px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.cf-stage {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 20px 20px 22px;
  border: 1px solid #d7e2f2;
  border-radius: 14px;
  background: #fff;
}

.cf-stage:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -16px;
  width: 0;
  height: 0;
  margin-top: -7px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid #8a94a6;
}

p.cf-stage__n {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #5a6a80;
}

p.cf-stage__t {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: #071b3a;
  text-wrap: pretty;
}

p.cf-stage__d {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #4b5b76;
  text-wrap: pretty;
}

p.cf-stage__warn {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #8a5a06;
  text-wrap: pretty;
}

/* ---------- archetype: lifecycle with ownership bands ---------- */

.cf-journey {
  padding: 26px 28px 28px;
  border: 1px solid #d7e2f2;
  border-radius: 16px;
  background: #fff;
}

.cf-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
}

.cf-step {
  padding: 14px 14px 16px;
  border-radius: 10px;
  background: #f4f7fb;
  box-shadow: inset 0 0 0 1px #dfe7f3;
}

p.cf-step__n {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #5a6a80;
}

p.cf-step__t {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #071b3a;
  text-wrap: pretty;
}

.cf-bands {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.cf-band {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

p.cf-band__k {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: pretty;
}

.cf-band--a p.cf-band__k { color: var(--a); }
.cf-band--b p.cf-band__k { color: var(--b); }
.cf-band--s p.cf-band__k { color: #4b5b76; }
.cf-band--x p.cf-band__k { color: #8a5a06; }

/* .cf-span is absolutely positioned, so it cannot grow the track: keep span text to
   TWO lines at the span's width (~40 characters under 45% width). Longer copy belongs
   in the figure's closing note, not in the bar. overflow:hidden is the safety net. */
.cf-track {
  position: relative;
  min-height: 50px;
  border-radius: 8px;
  background: #f4f7fb;
  box-shadow: inset 0 0 0 1px #dfe7f3;
}

.cf-span {
  position: absolute;
  top: 4px;
  bottom: 4px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  text-wrap: pretty;
  overflow: hidden;
}

.cf-band--a .cf-span { background: var(--a); }
.cf-band--b .cf-span { background: var(--b); }

.cf-band--s .cf-span {
  background: #fff;
  box-shadow: inset 0 0 0 2px #8a94a6;
  color: #33465f;
}

.cf-band--x .cf-span {
  background: repeating-linear-gradient(-45deg, #f0e2c4 0 7px, #fbf4e6 7px 14px);
  box-shadow: inset 0 0 0 1px #e6cd9a;
  color: #6b4e08;
}

/* ---------- archetype: converging architecture ---------- */

.cf-arch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
}

.cf-col {
  display: grid;
  align-content: start;
  gap: 10px;
}

p.cf-col__k {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #5a6a80;
}

.cf-node {
  padding: 14px 16px 15px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #d7e2f2;
  font-size: 15px;
  line-height: 1.4;
  color: #33465f;
  text-wrap: pretty;
}

.cf-node b {
  display: block;
  font-size: 16px;
  color: #071b3a;
}

.cf-node--join {
  background: #eef2f8;
  box-shadow: inset 0 0 0 2px #b0bdcd;
}

.cf-node--a { box-shadow: inset 0 0 0 1px #d7e2f2, inset 4px 0 0 var(--a); }
.cf-node--b { box-shadow: inset 0 0 0 1px #d7e2f2, inset 4px 0 0 var(--b); }
.cf-node--h { box-shadow: inset 0 0 0 1px #d7e2f2, inset 4px 0 0 var(--h); }

.cf-node--warn {
  background: #fbf4e6;
  box-shadow: inset 0 0 0 1px #e6cd9a;
  color: #6b4e08;
}

/* ---------- archetype: capability layers ---------- */

.cf-layers {
  border: 1px solid #d7e2f2;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.cf-lrow {
  display: grid;
  grid-template-columns: 250px repeat(var(--n, 2), minmax(0, 1fr));
  align-items: center;
  gap: 12px 16px;
  padding: 14px 24px;
  border-top: 1px solid #e6edf7;
}

.cf-lrow--head {
  border-top: 0;
  padding-top: 20px;
  padding-bottom: 16px;
}

p.cf-lhead {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.cf-lhead--a { color: var(--a); }
.cf-lhead--b { color: var(--b); }
.cf-lhead--c { color: var(--c); }
.cf-lhead--h { color: var(--h); }

p.cf-lname {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #071b3a;
  text-wrap: pretty;
}

.cf-cell {
  display: grid;
  gap: 7px;
}

.cf-meter {
  display: flex;
  gap: 3px;
}

.cf-meter i {
  height: 9px;
  flex: 1 1 0;
  border-radius: 2px;
  background: #e4eaf4;
}

.cf-cell--a .cf-meter i.on { background: var(--a); }
.cf-cell--b .cf-meter i.on { background: var(--b); }
.cf-cell--c .cf-meter i.on { background: var(--c); }
.cf-cell--h .cf-meter i.on { background: var(--h); }

.cf-meter i.part {
  background: repeating-linear-gradient(-45deg, #b0bdcd 0 3px, #e4eaf4 3px 6px);
}

p.cf-cellt {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  color: #4b5b76;
  text-wrap: pretty;
}

p.cf-cellt.none { color: #8a5a06; }

/* ---------- archetype: qualitative lean ---------- */

.cf-matrix {
  padding: 8px 26px 20px;
  border: 1px solid #d7e2f2;
  border-radius: 16px;
  background: #fff;
}

.cf-mrow {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid #e6edf7;
}

.cf-mrow:first-child { border-top: 0; }

.cf-mtrack {
  position: relative;
  min-height: 46px;
  border-radius: 8px;
  background: #f4f7fb;
  box-shadow: inset 0 0 0 1px #dfe7f3;
}

.cf-mtrack::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 1px;
  background: #cfdcf0;
}

.cf-mark {
  position: absolute;
  top: 5px;
  bottom: 5px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  text-wrap: pretty;
}

.cf-mark--a { background: var(--a); }
.cf-mark--b { background: var(--b); }

.cf-mlegend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid #e6edf7;
  font-size: 15px;
  font-weight: 600;
  color: #4b5b76;
}

.cf-mlegend span:last-child { text-align: right; }

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .cf-triangle--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cf-flow {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cf-stage:nth-child(3n)::after { display: none; }

  .cf-lrow { grid-template-columns: 200px repeat(var(--n, 2), minmax(0, 1fr)); }

  .cf-steps {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 940px) {
  .cf-fig { padding: 26px 22px 24px; }

  h3.cf-h { font-size: 22px; }

  .cf-spectrum,
  .cf-triangle,
  .cf-triangle--4,
  .cf-arch { grid-template-columns: minmax(0, 1fr); }

  .cf-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cf-stage::after { display: none; }

  .cf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cf-band,
  .cf-mrow {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .cf-lrow {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 16px 20px;
  }

  .cf-lrow--head { display: none; }

  .cf-cell::before {
    font-size: 15px;
    font-weight: 700;
  }

  .cf-cell--a::before { content: attr(data-p); color: var(--a); }
  .cf-cell--b::before { content: attr(data-p); color: var(--b); }
  .cf-cell--c::before { content: attr(data-p); color: var(--c); }
  .cf-cell--h::before { content: attr(data-p); color: var(--h); }

  .cf-axis,
  .cf-mlegend { grid-template-columns: minmax(0, 1fr); }

  .cf-axis span:last-child,
  .cf-mlegend span:last-child { text-align: left; }
}

@media (max-width: 620px) {
  .cf-flow,
  .cf-steps { grid-template-columns: minmax(0, 1fr); }
}

/* Phone composition: stack proportional labels so their text remains readable. */
@media (max-width: 620px) {
  .cf-track,
  .cf-mtrack {
    display: grid;
    gap: 4px;
    min-height: 0;
    padding: 4px;
  }

  .cf-track > .cf-span,
  .cf-mtrack > .cf-mark {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0;
    min-height: 40px;
    height: auto;
    padding: 10px 12px;
    overflow-wrap: anywhere;
  }

  .cf-mtrack::before { display: none; }
}

/* Article-width composition: protect labels beside the sticky summary. */
@media (min-width: 621px) {
  .cf-track,
  .cf-mtrack { min-height: 58px; }
}

@media (min-width: 941px) and (max-width: 1360px) {
  .cf-flow,
  .cf-steps {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cf-stage:nth-child(3n)::after { display: none; }
}