/* ============================================================================
   ecosystem-pages.css — Soffio and Matchbox
   ----------------------------------------------------------------------------
   Loaded after assets/eugeny.css, assets/common-home.css and
   assets/inner-pages.css, and only on the two ecosystem routes. It adds the
   structures those pages need without changing the Common Ground world: warm
   ivory paper, ink blue, pale blue bands, one coral accent, Fraunces display
   against system UI, flat surfaces and hairline rules.

     Soffio     scope ledger hero, knowledge register, plane ledger, peer
                proof table, brokered publication panel
     Matchbox   call path hero, broker mode columns, grant table, custody
                letter, reach ledger, device proof panel

   Everything else on both routes comes from inner-pages.css. No gradients.
   Coral marks rules and labels only, in the darker mix that holds contrast on
   ivory and on the pale blue band.
   ========================================================================== */

:root {
  --ec-mark: #8a3220;
}


/* ----------------------------------------------------------------------------
   01. Editorial plate, the hero figure on both ecosystem routes
   ------------------------------------------------------------------------- */
.ec-plate {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(24px, 3vw, 42px) clamp(22px, 2.8vw, 40px);
  min-height: clamp(420px, 43vw, 600px);
  background: var(--ch-ivory-2);
  border: 1px solid var(--ch-line-2);
}

.ec-plate-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ch-label);
}

.ec-plate-foot {
  padding-top: 12px;
  border-top: 1px solid var(--ch-line);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ch-body);
  max-width: 46ch;
}
.ec-plate-foot a { color: var(--ch-ink); text-underline-offset: .22em; }


/* ----------------------------------------------------------------------------
   02. Soffio: scope ledger inside the hero plate
   ------------------------------------------------------------------------- */
.ec-scope {
  margin: 0;
  border-top: 2px solid var(--ch-ink);
}
.ec-scope-row {
  padding: clamp(12px, 1.4vw, 17px) 0;
  border-bottom: 1px solid var(--ch-line);
}
.ec-scope-row:last-child { border-bottom: 0; }
.ec-scope-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 0;
  font-family: var(--ch-display);
  font-size: clamp(1.06rem, 1.5vw, 1.32rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--ch-ink);
}
.ec-scope-note {
  margin: 6px 0 0;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--ch-body);
  max-width: 42ch;
}

.ec-mark {
  font-family: var(--ch-ui);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ec-mark);
  white-space: nowrap;
}


/* ----------------------------------------------------------------------------
   03. Matchbox: brokered call path inside the hero plate
   ------------------------------------------------------------------------- */
.ec-call-list { display: grid; }

.ec-call-step { padding-block: clamp(10px, 1.3vw, 15px); }

.ec-call-step--broker {
  padding-block: clamp(13px, 1.6vw, 18px);
}

.ec-call-name {
  font-family: var(--ch-display);
  font-size: clamp(1.1rem, 1.55vw, 1.36rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--ch-ink);
}

.ec-call-note {
  margin-top: 5px;
  font-size: .93rem;
  line-height: 1.52;
  color: var(--ch-body);
  max-width: 40ch;
}

.ec-call-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ec-mark);
}
.ec-call-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--ch-orange);
}

.ec-call-join {
  position: relative;
  height: clamp(18px, 2.2vw, 26px);
  margin-left: clamp(10px, 1.3vw, 15px);
  border-left: 1px solid var(--ch-line-2);
}
.ec-call-join .ch-ic {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 16px;
  height: 10px;
  translate: -50% 3px;
  rotate: 90deg;
  color: #9a3b1e;
  stroke-width: 2;
}


/* Footnote rule under a table of proof. */
.ec-note {
  margin-top: clamp(20px, 2.4vw, 30px);
  padding-top: 14px;
  border-top: 1px solid var(--ch-line);
  max-width: 64ch;
  font-size: .97rem;
  line-height: 1.6;
  color: var(--ch-body);
}


/* ----------------------------------------------------------------------------
   04. Matchbox: broker mode columns on the pale blue band
   ------------------------------------------------------------------------- */
.ec-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(22px, 2.8vw, 38px);
}
.ec-mode {
  padding: clamp(15px, 1.9vw, 22px) clamp(16px, 2.2vw, 32px) clamp(14px, 1.8vw, 20px) 0;
  border-top: 2px solid var(--ch-band-ink);
}
.ec-mode + .ec-mode {
  border-left: 1px solid rgba(27, 47, 92, .24);
  padding-left: clamp(16px, 2.2vw, 32px);
}
.ec-mode-name {
  font-family: var(--ch-display);
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.012em;
  color: var(--ch-band-ink);
}
.ec-mode-return {
  margin-top: 8px;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ec-mark);
}
.ec-mode p:not(.ec-mode-return) {
  margin-top: 10px;
  font-size: .95rem;
  line-height: 1.58;
  color: #22364e;
  max-width: 40ch;
}


/* ----------------------------------------------------------------------------
   05. Knowledge register gutter labels, used by Soffio
   ------------------------------------------------------------------------- */
.ip-entry .ec-gutter {
  padding-top: .55em;
  font-family: var(--ch-ui);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ch-label);
}


/* ----------------------------------------------------------------------------
   05a. Inline links on the ink surfaces keep their colour on hover
   ------------------------------------------------------------------------- */
.ip-panel .ip-prose a:hover,
.ip-plate-copy a:hover { color: #fdf8ea; }


/* ----------------------------------------------------------------------------
   06. Motion, one entrance, then quiet settling
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ec-plate { animation: ec-plate-in .95s var(--ch-ease) .06s both; }

  .ec-mode {
    animation: ip-settle .72s var(--ch-ease) both;
    animation-timeline: view();
    animation-range: entry 4% cover 22%;
  }
}

@supports not (animation-timeline: view()) {
  .ec-mode { animation: none; }
}

@keyframes ec-plate-in {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}


/* ----------------------------------------------------------------------------
   07. Responsive, 360 to 1440
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ec-plate,
  .ec-mode { animation: none !important; }
}

@media (max-width: 860px) {
  .ip-entry { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ip-entry .ec-gutter { padding-top: 0; }
}

@media (max-width: 1020px) {
  .ec-plate {
    min-height: 0;
    padding: clamp(20px, 4vw, 30px) var(--ch-gutter);
    border-inline: 0;
  }
  .ec-plate-foot { max-width: 52ch; }

  .ec-modes { grid-template-columns: minmax(0, 1fr); }
  .ec-mode { padding: clamp(15px, 2.4vw, 20px) 0; }
  .ec-mode + .ec-mode {
    border-left: 0;
    border-top: 1px solid rgba(27, 47, 92, .24);
    padding-left: 0;
  }
  .ec-mode p:not(.ec-mode-return) { max-width: 56ch; }
}

@media (max-width: 720px) {
  .ec-scope-name { font-size: 1.04rem; }
  .ec-call-name { font-size: 1.08rem; }
  .ip-entry .ec-gutter { padding-top: 0; }
}