/* ============================================================
   George Brothers — css/demos/corpus.css
   TRY IT panel for /portfolio/corpus. A stand-in inbox of six
   short scraps: pick one and watch a three-step routing decision
   play out — the local classifier's verdict, which embedder the
   page goes to, and whether the cloud librarian is even allowed
   to read it. The blocked lane (cloud, for anything sensitive)
   visibly greys out rather than just being omitted, so the
   boundary is something you see, not something you're told.
   Motion is a plain opacity/transform transition — the sitewide
   reduced-motion clamp in css/site.css already forces it to land
   on its final frame with no animation, so no extra media query
   is needed here.
   ============================================================ */

.cpd{display:flex;flex-direction:column;gap:18px}
.cpd-label{font:400 12px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:rgba(243,234,217,.6)}

.cpd-inbox{display:flex;flex-direction:column;gap:8px}
.cpd-scrap{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;background:rgba(243,234,217,.03);border:1px solid rgba(243,234,217,.18);border-radius:12px;padding:12px 16px;cursor:pointer;transition:border-color .3s,background .3s}
.cpd-scrap:hover,.cpd-scrap:focus-visible{border-color:rgba(243,234,217,.4);background:rgba(243,234,217,.06)}
.cpd-scrap.on{border-color:#efa85c;background:rgba(239,168,92,.08)}
.cpd-scrap-kind{flex:none;font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:rgba(243,234,217,.5);white-space:nowrap}
.cpd-scrap-text{font:400 14px/1.5 'Space Grotesk',sans-serif;color:#f3ead9}

.cpd-route{border-top:1px solid rgba(243,234,217,.14);padding-top:20px;margin-top:4px;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.cpd-route.on{opacity:1;transform:none}

.cpd-steps{display:flex;flex-direction:column;gap:14px}
.cpd-step{border:1px solid rgba(243,234,217,.16);border-radius:12px;padding:14px 16px;opacity:0;transform:translateX(-8px);transition:opacity .35s ease,transform .35s ease}
.cpd-route.on .cpd-step{opacity:1;transform:none}
.cpd-route.on .cpd-step:nth-child(2){transition-delay:.12s}
.cpd-route.on .cpd-step:nth-child(3){transition-delay:.24s}

.cpd-step-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cpd-step-n{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:rgba(243,234,217,.5)}
.cpd-step-t{font:500 12.5px 'IBM Plex Mono',monospace;letter-spacing:.04em;color:#f3ead9}
.cpd-verdict{font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.08em;border-radius:99px;padding:3px 10px}
.cpd-verdict-cleared{background:rgba(147,181,115,.16);color:#9bd18a;border:1px solid rgba(147,181,115,.4)}
.cpd-verdict-sensitive{background:rgba(192,57,43,.14);color:#e28577;border:1px solid rgba(192,57,43,.4)}
.cpd-step-d{margin:8px 0 0;font:400 13.5px/1.65 'Space Grotesk',sans-serif;color:rgba(243,234,217,.78)}

.cpd-lanes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.cpd-lane{border-radius:10px;padding:10px 12px;border:1px solid rgba(243,234,217,.16);transition:opacity .3s,border-color .3s,background .3s}
.cpd-lane-active{border-color:#efa85c;background:rgba(239,168,92,.08)}
.cpd-lane-blocked{opacity:.4}
.cpd-lane-h{font:500 10.5px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#f3ead9}
.cpd-lane-s{display:block;margin-top:4px;font:400 12px/1.5 'Space Grotesk',sans-serif;color:rgba(243,234,217,.65)}

.cpd-note{margin:14px 0 0;font:400 12.5px/1.6 'Space Grotesk',sans-serif;color:rgba(243,234,217,.55)}
.cpd-note strong{color:rgba(243,234,217,.72);font-weight:500}

@media (max-width:520px){
  .cpd-lanes{grid-template-columns:1fr}
}