/* Local, light process cards. The document flow moves subsequent cards down. */
.process-preview { width: 100%; max-width: 560px; padding: 12px 0; justify-self: center; }
.preview-heading { display: flex; justify-content: space-between; gap: 12px; padding-inline: 8px; font-size: .72rem; color: #4d5868; }
.preview-heading > span { white-space: nowrap; font-family: Consolas, monospace; }
.process-deck { position: relative; isolation: isolate; margin-top: 24px; padding: 0 4px 12px; }
.process-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  width: 100%; height: 376px; margin: 0; padding: 19px 24px 25px; overflow: hidden;
  border: 1px solid #d5deea; border-radius: 18px; color: #263442; font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 10px 24px -16px #26344240, inset 0 1px 0 #fff;
  transition: height .42s cubic-bezier(.2,.75,.25,1), margin .42s cubic-bezier(.2,.75,.25,1), box-shadow .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.process-card + .process-card { margin-top: 12px; }
.card-input { z-index: 1; background: linear-gradient(125deg, #fff, #edf4ff); }
.card-processing { z-index: 2; background: linear-gradient(125deg, #fff, #eff9e8); }
.card-output { z-index: 3; background: linear-gradient(125deg, #fff, #f2f1fc); }
.process-deck[data-enhanced] .process-card { height: 78px; }
.process-deck[data-enhanced] .process-card + .process-card { margin-top: -13px; }
.process-deck[data-enhanced] .process-card.is-active { height: 376px; border-color: #aabecf; box-shadow: 0 14px 30px -18px #26344250; }
.process-deck[data-enhanced] .process-card.is-active + .process-card { margin-top: 12px; }
.process-card:focus-visible { outline: 3px solid #328000; outline-offset: 2px; }
.card-topline { display: flex; flex-shrink: 0; justify-content: space-between; align-items: center; gap: 10px; min-height: 27px; font-size: .65rem; letter-spacing: .09em; color: #4d5868; }
.card-format { padding: 3px 10px; border: 1px solid #c8d5e3; border-radius: 30px; font-size: .62rem; background: #ffffffc9; letter-spacing: .04em; }
.card-title { flex-shrink: 0; margin-top: 20px; font-size: clamp(1.15rem, 1.8vw, 1.5rem); letter-spacing: -.035em; line-height: 1.2; font-weight: 650; }
.card-description { flex-shrink: 0; margin-top: 10px; color: #526170; font-size: .78rem; line-height: 1.6; }
.card-example { display: block; flex-shrink: 0; margin-top: 17px; padding: 14px; border: 1px solid #dfe5ed; border-radius: 9px; background: #ffffffc9; }
.example-heading { display: flex; justify-content: space-between; gap: 8px; color: #526170; font-size: .62rem; font-weight: 650; letter-spacing: .04em; padding-bottom: 8px; }
.example-heading > span { font-size: .56rem; color: #65717e; }
.example-row { display: flex; justify-content: space-between; gap: 10px; padding-block: 7px; border-top: 1px solid #e9edf3; font-size: .73rem; }
.example-row > span { color: #526170; }
.example-row strong { font-weight: 600; text-align: right; }
.validation-example strong { color: #326c19; }
.json-example { padding-block: 12px; }
.json-example code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; font: .73rem/1.65 Consolas, monospace; color: #40526c; }
.json-example code span { color: #326c19; }
.card-tags { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; }
.card-tags > span { padding: 3px 8px; border: 1px solid #d6dfeb; border-radius: 30px; background: #ffffff99; font-size: .6rem; color: #526170; }
.deck-controls { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.deck-controls[hidden] { display: none; }
.deck-controls button { padding: 10px 13px; border: 1px solid #d8e0ea; border-radius: 30px; color: #4d5868; background: #fff; font: 600 .72rem "Segoe UI", Arial, sans-serif; cursor: pointer; }
.deck-controls button span { margin-left: 4px; }
.deck-controls button[aria-pressed="true"] { background: #eefbe6; color: #285f08; border-color: #91bc71; }
.deck-controls button:hover { border-color: #328000; }
.deck-controls button:focus-visible { outline: 3px solid #328000; outline-offset: 3px; }
.preview-note { margin-top: 14px; text-align: center; font-size: .67rem; color: #5c6877; }
@media (max-width: 1000px) and (min-width: 761px), (max-width: 380px) {
  .process-card { padding-inline: 16px; }
  .card-title { font-size: 1.15rem; }
  .card-description { font-size: .74rem; }
  .card-example { padding-inline: 10px; }
  .json-example code { font-size: .68rem; }
  .example-row { font-size: .67rem; }
  .deck-controls { gap: 5px; }
  .deck-controls button { padding-inline: 8px; font-size: .68rem; }
}
@media (max-width: 380px) {
  .process-card, .process-deck[data-enhanced] .process-card.is-active { height: 410px; }
}
@media (prefers-reduced-motion: reduce) { .process-card { transition: none; } }