/* ============================================================
   George Brothers — css/demos/context-drop.css
   TRY IT panel for /work/context-drop. A stand-in six-note vault:
   ask a question and see the context package the assistant would
   get on one side, and the manifest of what got held back on the
   other, so the restricted note is always named, never silently
   dropped. 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.
   ============================================================ */

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

.cdd-form{display:flex;gap:10px;flex-wrap:wrap}
.cdd-input{flex:1 1 260px;min-width:0;background:rgba(243,234,217,.03);border:1px solid rgba(243,234,217,.22);border-radius:10px;padding:12px 14px;font:400 14.5px 'Space Grotesk',sans-serif;color:#f3ead9;transition:border-color .3s,background .3s}
.cdd-input::placeholder{color:rgba(243,234,217,.4)}
.cdd-input:hover{border-color:rgba(243,234,217,.38)}
.cdd-input:focus-visible{outline:none;border-color:#efa85c;background:rgba(243,234,217,.06)}
.cdd-ask{flex:none;background:#f3ead9;color:#171009;font:500 13.5px 'Space Grotesk',sans-serif;padding:12px 22px;border-radius:999px;cursor:pointer;transition:background .3s}
.cdd-ask:hover,.cdd-ask:focus-visible{background:#efa85c}

.cdd-chips{display:flex;gap:8px;flex-wrap:wrap}
.cdd-chip{background:rgba(243,234,217,.03);border:1px solid rgba(243,234,217,.18);border-radius:999px;padding:8px 14px;font:400 12.5px 'Space Grotesk',sans-serif;color:rgba(243,234,217,.75);cursor:pointer;text-align:left;transition:border-color .3s,background .3s,color .3s}
.cdd-chip:hover,.cdd-chip:focus-visible{border-color:rgba(243,234,217,.4);background:rgba(243,234,217,.06);color:#f3ead9}

.cdd-results{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid rgba(243,234,217,.14);padding-top:18px;margin-top:4px;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.cdd-results.on{opacity:1;transform:none}
.cdd-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.cdd-col-h{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#efa85c}

.cdd-card{display:flex;flex-direction:column;gap:6px;border-radius:12px;padding:12px 14px;box-sizing:border-box}
.cdd-card-returned{border:1px solid rgba(147,181,115,.4);background:rgba(147,181,115,.08)}
.cdd-card-held{border:1px solid rgba(192,57,43,.4);background:rgba(192,57,43,.07)}
.cdd-card-held.cdd-held-idle{border-color:rgba(243,234,217,.18);background:rgba(243,234,217,.03)}
.cdd-card-title{font:500 13px 'IBM Plex Mono',monospace;letter-spacing:.01em;color:#f3ead9}
.cdd-card-snip{margin:0;font:400 13.5px/1.6 'Space Grotesk',sans-serif;color:rgba(243,234,217,.78)}
.cdd-locked{color:rgba(243,234,217,.6);font-style:italic}
.cdd-empty{margin:0;font:400 13.5px/1.6 'Space Grotesk',sans-serif;color:rgba(243,234,217,.55)}

@media (max-width:640px){
  .cdd-results{grid-template-columns:1fr}
}