/* model-companies-and-users figures — loaded article-locally after resources.css.
   Replaces b2b-company-user-relationship-model.svg, event-time-account-context.svg
   and membership-history-timeline.svg. */

.mc-fig {
  margin: 38px 0;
  padding: 30px 32px 28px;
  border: 1px solid #cfdcf0;
  border-radius: 20px;
  background: #f4f7fb;
  color: #071b3a;
}

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

p.mc-k {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5a6a80;
}

p.mc-k--mid { margin-top: 20px; }
p.mc-k--bad { color: #8a5a06; }

/* ---------- figure 1: the model ---------- */

.mc-model {
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
  gap: 24px;
}

.mc-people,
.mc-nest {
  padding: 18px 20px 20px;
  border: 1px solid #d7e2f2;
  border-radius: 16px;
  background: #fff;
}

.mc-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #cfdcf0;
  border-radius: 12px;
  background: #f4f7fb;
  font-size: 17px;
  font-weight: 700;
}

.mc-user__i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #071b3a;
  color: #fff;
  font-size: 13px;
}

.mc-mems {
  display: grid;
  gap: 10px;
}

.mc-mem {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 10px;
  padding: 11px 14px;
  border: 1px solid #d7e2f2;
  border-left: 3px solid #2f6df6;
  border-radius: 0 12px 12px 0;
  background: #fff;
}

p.mc-mem__t {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: #071b3a;
}

p.mc-mem__d {
  grid-column: 2;
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: #5a6a80;
}

.mc-mem__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2f6df6;
  transform: translateY(-1px);
}

.mc-mem__dot--green { background: #17693f; }

.mc-mems .mc-mem:last-child { border-left-color: #17693f; }

.mc-co {
  padding: 12px 14px 14px;
  border: 2px solid #2f6df6;
  border-radius: 14px;
  background: #f2f6ff;
}

.mc-co + .mc-co { margin-top: 12px; }

.mc-co--green {
  border-color: #17693f;
  background: #f1f7f3;
}

p.mc-co__t {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #071b3a;
}

.mc-co__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mc-co--green .mc-co__body { grid-template-columns: minmax(0, 1fr); }

.mc-ws {
  padding: 10px 12px 12px;
  border: 1px solid #cfdcf0;
  border-radius: 10px;
  background: #fff;
}

p.mc-ws__t {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #071b3a;
}

.mc-visit {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px dashed #b0bdcd;
  border-radius: 999px;
  background: #f8fafd;
}

.mc-visit + .mc-visit { margin-top: 6px; }

.mc-visit__k {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5a6a80;
}

.mc-e {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #2f6df6;
}

.mc-e--green { background: #17693f; }

p.mc-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 14px;
  color: #5a6a80;
}

.mc-stamp {
  margin-top: 20px;
  padding: 16px 20px 18px;
  border: 1px solid #d7e2f2;
  border-radius: 16px;
  background: #fff;
}

.mc-stamp__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mc-stamp__chips span {
  padding: 5px 11px;
  border: 1px solid #cfdcf0;
  border-radius: 999px;
  background: #f4f7fb;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: #2559c9;
}

/* ---------- figure 2: event-time context ---------- */

.mc-tl {
  padding: 18px 22px 14px;
  border: 1px solid #d7e2f2;
  border-radius: 16px;
  background: #fff;
}

.mc-tl--bad {
  margin-top: 16px;
  border-color: #e6cd9a;
  background: #fdf9f1;
}

.mc-lane {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid #e6edf7;
}

.mc-lane:first-of-type { border-top: 0; }

p.mc-lane__t {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
  color: #071b3a;
}

p.mc-lane__n {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #4b5b76;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

p.mc-lane__n--bad { color: #8a5a06; }

.mc-track {
  position: relative;
  height: 26px;
  border-radius: 6px;
  background: #f4f7fb;
  box-shadow: inset 0 0 0 1px #e6edf7;
}

.mc-ev {
  position: absolute;
  top: 50%;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 50%;
  background: #2f6df6;
}

.mc-ev--green { background: #17693f; }

.mc-ev--wrong {
  background: #fdf2dd;
  box-shadow: inset 0 0 0 2.5px #b8860b;
}

.mc-switch {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 0;
  border-left: 2px dashed #5a6a80;
}

.mc-switch b {
  position: absolute;
  top: -20px;
  left: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: #5a6a80;
}

.mc-switch--back b { left: auto; right: 6px; }

p.mc-axis {
  display: flex;
  justify-content: space-between;
  margin: 8px 0 0;
  padding-left: 224px;
  padding-right: 88px;
  font-size: 13px;
  font-weight: 600;
  color: #5a6a80;
  font-variant-numeric: tabular-nums;
}

p.mc-bad {
  margin: 4px 0 6px;
  font-size: 14px;
  line-height: 1.45;
  color: #6b4e08;
  text-wrap: pretty;
}

/* ---------- figure 3: membership history ---------- */

.mc-gantt {
  padding: 18px 22px 14px;
  border: 1px solid #d7e2f2;
  border-radius: 16px;
  background: #fff;
}

.mc-row {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 0 0;
  border-top: 1px solid #e6edf7;
}

.mc-row:first-child { border-top: 0; }

p.mc-row__t {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: #071b3a;
}

p.mc-row__d {
  margin: 1px 0 0;
  font-size: 14px;
  line-height: 1.3;
  color: #5a6a80;
}

.mc-track--tall { height: 34px; }

.mc-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding-left: 12px;
  border-radius: 6px;
  background: #2f6df6;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
}

.mc-bar--blued { background: #1e4fbd; }
.mc-bar--green { background: #17693f; }

.mc-bar--ghost {
  background: repeating-linear-gradient(-45deg, #eef1f5 0 6px, #fff 6px 12px);
  box-shadow: inset 0 0 0 1px #b0bdcd;
  color: #5a6a80;
}

.mc-end {
  position: absolute;
  top: 0;
  bottom: 0;
  padding-left: 10px;
  border-left: 2px solid #071b3a;
  font-size: 13px;
  font-weight: 600;
  line-height: 34px;
  white-space: nowrap;
  color: #4b5b76;
}

.mc-ev--pin {
  top: -9px;
  width: 13px;
  height: 13px;
  margin: 0 0 0 -6.5px;
  background: #fff;
  box-shadow: 0 0 0 3px #071b3a;
  z-index: 1;
}

.mc-ev--pin b {
  position: absolute;
  left: 50%;
  top: 40px;
  transform: translateX(-50%);
  display: grid;
  gap: 1px;
  padding: 5px 10px 6px;
  border-radius: 8px;
  background: #071b3a;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  text-align: center;
}

.mc-ev--pin em {
  font-style: normal;
  font-weight: 600;
  color: #a8c2f0;
}

.mc-ev--pingreen { box-shadow: 0 0 0 3px #17693f; }
.mc-ev--pingreen b { background: #17693f; }
.mc-ev--pingreen em { color: #b7dcc6; }

.mc-ev--pingrey { box-shadow: 0 0 0 3px #5a6a80; }
.mc-ev--pingrey b { background: #4b5b76; }
.mc-ev--pingrey em { color: #cfd8e3; }

.mc-row .mc-track { overflow: visible; }

.mc-gantt .mc-row { padding-bottom: 62px; }

.mc-ev--pinleft b { left: -6px; transform: none; }

p.mc-axis--gantt {
  position: relative;
  display: block;
  height: 16px;
  margin: 0 0 0 224px;
  padding: 0;
}

.mc-axis--gantt span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

.mc-axis--gantt span:first-child { transform: none; }
.mc-axis--gantt span:last-child { transform: translateX(-100%); }

.mc-reads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

p.mc-read {
  margin: 0;
  padding: 12px 16px;
  border-left: 4px solid #2f6df6;
  border-radius: 0 10px 10px 0;
  background: #fff;
  font-size: 14px;
  line-height: 1.45;
  color: #4b5b76;
  text-wrap: pretty;
}

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

@media (max-width: 1180px) {
  .mc-model { grid-template-columns: 262px minmax(0, 1fr); }

  .mc-lane,
  .mc-row { grid-template-columns: 168px minmax(0, 1fr) 72px; }

  .mc-row { grid-template-columns: 168px minmax(0, 1fr); }

  p.mc-axis { padding-left: 184px; }
  p.mc-axis--gantt { margin-left: 184px; }
}

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

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

  .mc-model,
  .mc-co__body,
  .mc-reads { grid-template-columns: minmax(0, 1fr); }

  .mc-lane,
  .mc-row {
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 10px 16px;
  }

  .mc-lane__t,
  .mc-row__lab { grid-column: 1; }

  .mc-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  p.mc-lane__n { grid-column: 2; grid-row: 1; }

  p.mc-axis { padding-left: 0; padding-right: 0; }
  p.mc-axis--gantt { margin-left: 0; }

  .mc-switch b { font-size: 13px; }
}

@media (max-width: 620px) {
  .mc-stamp__chips span { font-size: 13px; }

  .mc-bar {
    padding-left: 8px;
    font-size: 13px;
  }

  .mc-end {
    right: 0;
    display: flex;
    align-items: center;
    padding: 3px 4px 3px 6px;
    font-size: 13px;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .mc-ev--pin b {
    width: 112px;
    padding: 4px 8px 5px;
    font-size: 13px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}