/* Content-specific diagrams. Only the four opt-in layouts use these rules. */
.bp-diagram--allocation .bp-diagram-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.bp-diagram--allocation .bp-money-origin { width: fit-content; margin: 0 auto 24px; padding: 8px 24px; border-bottom: 3px solid #f5c842; font-weight: 700; }
.bp-diagram--allocation .bp-diagram-card { position: relative; background: #fff; color: #17324a; border-radius: 0 0 14px 14px; padding: 24px 20px; }
.bp-diagram--allocation .bp-diagram-card::before { content: ''; position: absolute; top: -19px; left: 50%; height: 16px; border-left: 2px solid #f5c842; }
.bp-diagram--allocation .bp-pocket-icon { width: 56px; height: 48px; margin: 0 0 12px; color: #1a5b91; }
.bp-diagram--allocation .bp-diagram-card:last-child .bp-pocket-icon { color: #277454; }
.bp-diagram--allocation .bp-diagram-card strong { margin-bottom: 12px; }
.bp-diagram--timeline .bp-time-axis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; padding-bottom: 12px; border-bottom: 5px solid #f5c842; margin-bottom: 24px; font-weight: 700; }
.bp-diagram--timeline .bp-time-axis span:nth-child(2) { text-align: center; }
.bp-diagram--timeline .bp-time-axis span:last-child { text-align: right; }
.bp-diagram--timeline .bp-diagram-grid { grid-template-columns: 1fr 1fr; gap: 0; }
.bp-diagram--timeline .bp-diagram-card { border-radius: 0; background: repeating-linear-gradient(135deg,#354551 0 12px,#2c3d4a 12px 24px); padding: 22px; }
.bp-diagram--timeline .bp-diagram-card:last-child { background: #205343; border-left: 3px dashed #fff; }
.bp-diagram--timeline .bp-period { display: block; font-size: 16px; margin-bottom: 12px; color: #ffe58a; }
.bp-diagram--document .bp-slip { max-width: 460px; margin: auto; background: #fff; color: #17324a; padding: 26px; border-radius: 2px; box-shadow: 7px 7px 0 #587286; }
.bp-diagram--document .bp-slip-heading { font-size: 18px; font-weight: 700; text-align: center; padding-bottom: 16px; border-bottom: 2px solid #17324a; margin-bottom: 16px; }
.bp-diagram--document .bp-diagram-grid { grid-template-columns: 1fr; gap: 0; }
.bp-diagram--document .bp-diagram-card { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; background: #fff; color: #17324a; padding: 16px 0; border-radius: 0; border-bottom: 1px dashed #7890a1; }
.bp-diagram--document .bp-diagram-card strong { font-size: 16px; margin: 0; }
.bp-diagram--document .bp-diagram-card span { border-left: 2px solid #c8d8e8; padding-left: 12px; }
.bp-diagram--decision .bp-diagram-grid { grid-template-columns: 1fr; gap: 12px; max-width: 460px; margin: auto; }
.bp-diagram--decision .bp-diagram-card { border-radius: 40px; padding: 16px 24px; background: #244d6c; }
.bp-diagram--decision .bp-diagram-card strong { font-size: 16px; margin-bottom: 4px; color: #ffe58a; }
.bp-diagram--decision .bp-branch-arrow { text-align: center; margin: 14px 0; font-size: 24px; color: #f5c842; }
.bp-diagram--decision .bp-outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bp-diagram--decision .bp-outcome { padding: 20px; background: #205343; border-radius: 4px; }
.bp-diagram--decision .bp-outcome:last-child { background: #5b401f; }
.bp-diagram--decision .bp-outcome strong { display: block; font-size: 18px; margin-bottom: 10px; }
.bp-diagram--allocation .bp-diagram-note,
.bp-diagram--timeline .bp-diagram-note,
.bp-diagram--document .bp-diagram-note,
.bp-diagram--decision .bp-diagram-note { margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid #8ba3b5; font-size: 16px; }
@media (max-width:600px) {
  .bp-diagram--allocation .bp-diagram-grid { grid-template-columns: 1fr; gap: 24px; }
  .bp-diagram--timeline .bp-time-axis { grid-template-columns: 1fr; border-bottom: 0; border-left: 5px solid #f5c842; padding: 0 0 0 16px; }
  .bp-diagram--timeline .bp-time-axis span:nth-child(2) { text-align: left; }
  .bp-diagram--timeline .bp-time-axis span:last-child { text-align: left; }
  .bp-diagram--timeline .bp-diagram-grid { grid-template-columns: 1fr; }
  .bp-diagram--timeline .bp-diagram-card:last-child { border-left: 0; border-top: 3px dashed #f5c842; }
  .bp-diagram--document .bp-slip { padding: 18px 14px; box-shadow: 4px 4px 0 #587286; }
  .bp-diagram--document .bp-diagram-card { grid-template-columns: 1fr; gap: 8px; }
  .bp-diagram--document .bp-diagram-card span { border-left: 0; padding-left: 0; }
  .bp-diagram--decision .bp-diagram-card { padding: 16px 18px; border-radius: 18px; }
  .bp-diagram--decision .bp-outcomes { grid-template-columns: 1fr; }
}