/* The redaction machine (/security/): an example request on the left, the Gate between, the receipt on the right.
   Green is the receipt's draft format and what it keeps; ink is what stays behind; vermilion only on a held decision.
   Animated by public/assets/pages/security.js with transform and opacity only. */
.rdx .sec-head{margin-bottom:34px}
.rdx-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-bottom:26px}
.rdx-bar .btn{min-width:150px}
.rdx-bar .btn[aria-disabled="true"]{background:var(--text-2);cursor:progress}
.rdx-say{font-family:var(--mono);font-size:13px;line-height:1.55;color:var(--text-2);max-width:62em;flex:1 1 320px;min-height:3.1em;display:flex;align-items:center}

.rdx-m{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);align-items:start;overflow-x:clip}
.rdx-card{position:relative;border-radius:20px;background:var(--porcelain);box-shadow:var(--glaze);padding:20px 24px 14px;overflow:hidden}
.rdx-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;font-weight:650;font-size:17px;letter-spacing:-.01em}
.rdx-h .tag{height:26px}
.rdx-rows{margin:0;display:grid}
.rdx-row{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line);position:relative}
.rdx-row dt{font-family:var(--mono);font-size:12px;color:var(--text-3)}
.rdx-row dd{margin:0;font-family:var(--mono);font-size:13px;line-height:1.5;overflow-wrap:anywhere;min-width:0}

/* before: what the agent sent */
.rdx-in .rdx-v{color:var(--ink);background:linear-gradient(var(--ink),var(--ink)) no-repeat 0 58%/0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .55s var(--ease),color .5s var(--calm)}
.rdx-f{display:block;min-height:1.5em;margin-top:2px;font-size:11.5px;line-height:1.5;color:var(--ok)}
.rdx-row::before{content:"";position:absolute;left:-24px;right:-24px;top:0;bottom:0;background:rgba(15,23,34,.045);opacity:0;transition:opacity .4s var(--calm);pointer-events:none}
.rdx-in .rdx-row.go::before{opacity:1}
.rdx-in .rdx-row.gone .rdx-v{background-size:100% 2px;color:var(--text-3)}
.rdx-in .rdx-row.gone .rdx-f{color:var(--text-2)}
.rdx-in .rdx-row.gone::before{opacity:1;background:repeating-linear-gradient(135deg,rgba(15,23,34,.05) 0 2px,transparent 2px 9px)}
/* the Gate reads the request once, top to bottom */
.rdx-in::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ink);opacity:0;transform:translateY(0);pointer-events:none}
.rdx-in.scan::after{animation:rdx-scan .9s var(--calm) both}
@keyframes rdx-scan{0%{opacity:0;transform:translateY(40px)}12%{opacity:.7}88%{opacity:.7}100%{opacity:0;transform:translateY(var(--rdx-h,420px))}}

/* the Gate: a wall between the two when side by side, a floor between them when stacked */
.rdx-gate{position:relative;align-self:stretch;display:grid;place-items:center;min-height:120px}
.rdx-gate::before{content:"";position:absolute;left:50%;top:6%;bottom:6%;width:2px;margin-left:-1px;border-radius:2px;background:linear-gradient(180deg,rgba(15,23,34,0),rgba(15,23,34,.34) 14%,rgba(15,23,34,.34) 86%,rgba(15,23,34,0));transition:opacity .4s var(--calm)}
.rdx-gate::after{content:"";position:absolute;left:50%;top:6%;bottom:6%;width:4px;margin-left:-2px;border-radius:4px;background:var(--ink);opacity:0;transition:opacity .5s var(--calm)}
.rdx-gate.on::after{opacity:1}
.rdx-gate span{position:relative;z-index:1;padding:6px 10px;border-radius:8px;background:var(--page);font-family:var(--mono);font-size:12px;color:var(--text-2);white-space:nowrap}
.rdx-gate.on span{background:var(--ink);color:var(--cream)}

/* after: the receipt fills in */
.rdx-out .rdx-v{color:var(--text-3)}
.rdx-out .rdx-row.in .rdx-v{color:var(--ink)}
.rdx-out .rdx-row.incoming .rdx-v{opacity:0}
.rdx-out .rdx-row.in .rdx-v.held{color:var(--hold-text);font-weight:400}
.rdx-out .rdx-row.in .rdx-v.runs{color:var(--ok)}
.rdx-out .rdx-row::before{background:var(--ok-tint)}
.rdx-out .rdx-row.in::before{animation:rdx-land 1.2s var(--calm) both}
@keyframes rdx-land{0%{opacity:1}100%{opacity:0}}
.rdx-sig{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0 6px;border-top:1px solid var(--line)}
.rdx-code{width:64px;height:64px}
.rdx-code svg{width:100%;height:100%}
.rdx-code:empty{border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(15,23,34,.16)}
.rdx-sig p{min-width:0;font-family:var(--mono)}
.rdx-sk{display:block;font-size:11.5px;color:var(--text-3)}
.rdx-sv{display:block;font-size:13px;overflow-wrap:anywhere}

/* a value in flight */
.rdx-fly{position:absolute;left:0;top:0;z-index:5;max-width:min(380px,92%);padding:4px 9px;border-radius:8px;background:var(--card);box-shadow:var(--tile-edge);font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--ink);white-space:normal;overflow-wrap:anywhere;pointer-events:none;opacity:0;will-change:transform,opacity}
.rdx-fly.k{color:var(--ok);box-shadow:inset 0 0 0 1px rgba(26,122,80,.45),0 9px 16px -9px rgba(15,23,34,.28)}

/* the section's own two lists, lit as the machine reaches each kind */
.rdx-lists{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);margin-top:clamp(44px,6vw,72px)}
.rdx-list .h3{margin-bottom:12px}
.rdx-lists li{position:relative}
.rdx-lists li::before{content:"";position:absolute;left:-14px;top:18px;bottom:18px;width:3px;border-radius:3px;background:var(--ok);transform:scaleY(0);transform-origin:50% 0;transition:transform .45s var(--ease)}
.rdx-list+.rdx-list li::before{background:var(--ink)}
.rdx-lists li.on::before{transform:none}

@media (max-width:900px){
  .rdx-m{grid-template-columns:minmax(0,1fr)}
  .rdx-gate{min-height:64px}
  .rdx-gate::before{left:6%;right:6%;top:50%;bottom:auto;width:auto;height:2px;margin:-1px 0 0;background:linear-gradient(90deg,rgba(15,23,34,0),rgba(15,23,34,.34) 14%,rgba(15,23,34,.34) 86%,rgba(15,23,34,0))}
  .rdx-gate::after{left:6%;right:6%;top:50%;bottom:auto;width:auto;height:4px;margin:-2px 0 0}
  .rdx-lists{grid-template-columns:1fr}
}
@media (max-width:520px){
  .rdx-card{padding:16px 16px 10px;border-radius:16px}
  .rdx-row{grid-template-columns:72px minmax(0,1fr);gap:10px}
  .rdx-row::before{left:-16px;right:-16px}
  .rdx-row dd{font-size:12.5px}
  .rdx-sig{grid-template-columns:56px minmax(0,1fr)}
  .rdx-code{width:56px;height:56px}
  .rdx-sig .tag{grid-column:1/-1;justify-self:start}
  .rdx-lists li::before{left:-10px}
}
@media (prefers-reduced-motion:reduce){
  .rdx-in .rdx-v,.rdx-row::before,.rdx-gate::after,.rdx-lists li::before{transition:none}
  .rdx-in.scan::after,.rdx-out .rdx-row.in::before{animation:none}
}

/* v13 (31 Oct 2026): no cards and no drop shadows; the work stands on the canvas, divided by hairlines */
.rdx-card{background:none;box-shadow:none;border-radius:0;padding-inline:0;border-top:1px solid var(--ink)}
.rdx-fly{box-shadow:0 0 0 1px rgba(15,23,34,.16)}
.rdx-fly.k{box-shadow:inset 0 0 0 1px rgba(26,122,80,.45)}