/* Shared homepage mechanism composition. No page-specific geometry. */
/* Own the horizontal context too: audience mobile section rules must not
   widen the reused diagram. These are the original homepage gutters. */
section.mechanism { padding-inline: 2.5rem; }
@media (max-width: 900px) {
  section.mechanism { padding-inline: 1.5rem; }
}
  .mechanism-visual {
    margin-top: 3rem;
  }

  .mechanism-visual-panel {
    background: var(--paper);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    box-shadow: 0 28px 70px rgba(0,0,0,0.24);
    overflow: hidden;
    padding: 14px;
  }

  .mechanism-html-composition {
    width: 100%;
    max-width: 1126px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--border);
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(15,13,10,.043);
  }

  .mechanism-html-stage {
    position: relative;
    width: 1104px;
    height: 520px;
    min-height: 0;
    background: var(--paper);
    overflow: hidden;
  }

  .mechanism-html-stage * { box-sizing: border-box; }
  .mechanism-zone { position: absolute; }
  .mechanism-zone--coal { left: 0; top: 0; width: 330px; height: 288px; background: var(--amber-pale); }
  .mechanism-zone--renewable { left: 774px; top: 0; width: 330px; height: 288px; background: var(--green-pale); }
  .mechanism-output-band { position: absolute; left: 0; top: 308px; width: 1104px; height: 212px; background: var(--blue-pale); }

  .mechanism-label,
  .mechanism-record-label {
    position: absolute;
    font-size: 13.5px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mechanism-label--coal { left: 165px; top: 24px; transform: translateX(-50%); color: var(--amber-deep); }
  .mechanism-label--renewable { left: 939px; top: 24px; transform: translateX(-50%); color: var(--green-dark); }
  .mechanism-label--stream { display: none; }
  .mechanism-label--outputs { left: 34px; top: 320px; font-size: 11px; padding-right: 12px; color: var(--blue-dark); }
  .mechanism-record-label { top: 352px; transform: translateX(-50%); }
  .mechanism-record-label--sparc { left: 954px; color: var(--amber-deep); }
  .mechanism-record-label--irec { left: 552px; color: var(--green-dark); }
  .mechanism-record-label--arc { left: 184px; color: var(--blue-dark); }

  .mechanism-copy,
  .mechanism-record-copy {
    position: absolute;
    margin: 0;
    font-size: 14.4px;
    line-height: 18.5px;
    color: var(--ink-muted);
    text-align: center;
    font-weight: 300;
  }

  .mechanism-copy--coal { left: 165px; top: 230px; transform: translateX(-50%); width: 240px; }
  .mechanism-copy--stream { left: 552px; top: 234px; transform: translateX(-50%); width: 360px; }
  .mechanism-copy--renewable { left: 939px; top: 230px; transform: translateX(-50%); width: 300px; }
  .mechanism-record-copy { top: 456px; transform: translateX(-50%); }
  .mechanism-record-copy--sparc { left: 954px; width: 300px; }
  .mechanism-record-copy--irec { left: 552px; width: 214px; }
  .mechanism-record-copy--arc { left: 184px; width: 236px; }

  .mechanism-primitive {
    position: absolute;
    display: block;
    overflow: visible;
    object-fit: contain;
  }

  .mechanism-primitive--coal { left: 42px; top: 68px; width: 246px; height: 154px; }
  .mechanism-primitive--stream { left: 424px; top: 44px; width: 256px; height: 160px; }
  .mechanism-primitive--renewable { left: 816px; top: 68px; width: 246px; height: 154px; }
  .mechanism-primitive--sparc { left: 880px; top: 364px; width: 148px; height: 93px; }
  .mechanism-primitive--irec { left: 478px; top: 364px; width: 148px; height: 93px; }
  .mechanism-primitive--arc { left: 110px; top: 364px; width: 148px; height: 93px; }
  .mechanism-flow-layer { position: absolute; inset: 0; width: 1104px; height: 520px; pointer-events: none; overflow: visible; }
  .mechanism-mobile-flow-layer,
  .mechanism-mobile-card { display: none; }

  .mechanism-visual .label {
    font-family: var(--ff-body);
    font-weight: 500;
    letter-spacing: .14em;
  }

  .mechanism-visual .line {
    fill: none;
    stroke: #9A958F;
    stroke-width: 1.05;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .58;
  }

  .mechanism-visual .accent { stroke: #3A6EA8; }
  .mechanism-visual .pale { fill: #E8EEF6; }
  .mechanism-visual .paper { fill: #FAF8F4; }
  .mechanism-visual .none { fill: none; }

  @media (max-width: 1280px) {
    .mechanism-visual-panel {
      padding: 18px;
    }

    .mechanism-html-composition {
      width: 100%;
      max-width: 520px;
      padding: 0;
      border: 0;
      box-shadow: none;
      background: transparent;
      display: block;
    }

    .mechanism-html-stage {
      width: 100%;
      height: 752px;
      background: transparent;
      overflow: visible;
    }

    .mechanism-zone,
    .mechanism-output-band,
    .mechanism-label--stream,
    .mechanism-label--outputs {
      display: none;
    }

    .mechanism-mobile-card {
      position: absolute;
      left: 0;
      display: block;
      width: 100%;
      height: 112px;
      border: 1px solid var(--border);
      box-shadow: 0 10px 22px rgba(15,13,10,.05);
      z-index: 0;
    }

    .mechanism-mobile-card--coal { top: 0; background: var(--amber-pale); }
    .mechanism-mobile-card--stream { top: 128px; background: var(--white); }
    .mechanism-mobile-card--renewable { top: 256px; background: var(--green-pale); }
    .mechanism-mobile-card--sparc { top: 384px; background: var(--amber-pale); }
    .mechanism-mobile-card--irec { top: 512px; background: var(--green-pale); }
    .mechanism-mobile-card--arc { top: 640px; background: var(--blue-pale); }

    .mechanism-label,
    .mechanism-record-label {
      transform: none;
      font-family: var(--ff-body);
      font-size: 10.5px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: .14em;
      z-index: 2;
    }

    .mechanism-label--coal { left: 106px; top: 14px; }
    .mechanism-label--renewable { left: 106px; top: 270px; }
    .mechanism-record-label--sparc { left: 106px; top: 398px; }
    .mechanism-record-label--irec { left: 106px; top: 526px; }
    .mechanism-record-label--arc { left: 106px; top: 654px; }

    .mechanism-copy,
    .mechanism-record-copy {
      transform: none;
      text-align: left;
      font-size: 13.6px;
      line-height: 16.8px;
      z-index: 2;
    }

    .mechanism-copy--coal { left: 106px; top: 40px; width: calc(100% - 126px); }
    .mechanism-copy--stream { left: 106px; top: 164px; width: calc(100% - 126px); }
    .mechanism-copy--renewable { left: 106px; top: 296px; width: calc(100% - 126px); }
    .mechanism-record-copy--sparc { left: 106px; top: 424px; width: calc(100% - 126px); }
    .mechanism-record-copy--irec { left: 106px; top: 552px; width: calc(100% - 126px); }
    .mechanism-record-copy--arc { left: 106px; top: 680px; width: calc(100% - 126px); }

    .mechanism-primitive { z-index: 1; }
    .mechanism-primitive--coal { left: 22px; top: 39px; width: 58px; height: auto; }
    .mechanism-primitive--stream { left: 20px; top: 146px; width: 62px; height: auto; }
    .mechanism-primitive--renewable { left: 19px; top: 279px; width: 64px; height: auto; }
    .mechanism-primitive--sparc { left: 20px; top: 411px; width: 62px; height: auto; }
    .mechanism-primitive--irec { left: 20px; top: 539px; width: 62px; height: auto; }
    .mechanism-primitive--arc { left: 20px; top: 667px; width: 62px; height: auto; }
    .mechanism-flow-layer { display: none; }

    .mechanism-mobile-flow-layer {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 752px;
      pointer-events: none;
      overflow: visible;
      z-index: 1;
    }
  }


@media (max-width: 600px) {
  .mechanism-visual-panel { padding: 12px; }
}

/* Reviewed Thai labels need wrapping instead of English uppercase tracking. */
[data-language="th"] .mechanism-label,
[data-language="th"] .mechanism-record-label {
  letter-spacing: normal;
}
@media (max-width: 360px) {
  /* Same homepage flow, with shared extra row height for narrow-screen copy. */
  .mechanism-html-stage,
  .mechanism-mobile-flow-layer { height: 944px; }
  .mechanism-mobile-card { height: 144px; }
  .mechanism-mobile-card--stream { top: 160px; }
  .mechanism-mobile-card--renewable { top: 320px; }
  .mechanism-mobile-card--sparc { top: 480px; }
  .mechanism-mobile-card--irec { top: 640px; }
  .mechanism-mobile-card--arc { top: 800px; }
  .mechanism-label,
  .mechanism-record-label {
    white-space: normal;
    width: calc(100% - 126px);
  }
  .mechanism-label--renewable { top: 334px; }
  .mechanism-record-label--sparc { top: 494px; }
  .mechanism-record-label--irec { top: 654px; }
  .mechanism-record-label--arc { top: 814px; }
  .mechanism-copy--stream { top: 196px; }
  .mechanism-copy--renewable { top: 360px; }
  .mechanism-record-copy--sparc { top: 520px; }
  .mechanism-record-copy--irec { top: 680px; }
  .mechanism-record-copy--arc { top: 840px; }
  .mechanism-primitive--stream { top: 178px; }
  .mechanism-primitive--renewable { top: 343px; }
  .mechanism-primitive--sparc { top: 507px; }
  .mechanism-primitive--irec { top: 667px; }
  .mechanism-primitive--arc { top: 827px; }
}