/* Collect: source documents flow into Submission Studio, which fills the submission record */
.cl-wrap{position:relative;margin-top:44px;display:grid;grid-template-columns:minmax(0,1fr) 230px minmax(0,1fr);gap:32px;align-items:center}
.cl-sources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cl-doc{position:relative;background:var(--neutrals-white);border:1px solid var(--border-soft);border-radius:4px;padding:10px 12px 12px;box-shadow:0 1px 1px rgba(1,56,6,.05),0 5px 14px rgba(1,56,6,.06);opacity:0;transform:translateX(-16px) rotate(-1.2deg);transition:opacity 420ms ease,transform 560ms cubic-bezier(.4,0,.2,1),box-shadow 460ms ease,border-color 460ms ease}
.cl-doc:nth-child(even){transform:translateX(-16px) rotate(1.1deg)}
.cl-doc::after{content:"";position:absolute;top:0;right:0;width:13px;height:13px;background:linear-gradient(225deg,var(--background) 0 50%,transparent 50%);border-left:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.cl-doc.in{opacity:1;transform:rotate(-.7deg)}
.cl-doc.in:nth-child(even){transform:rotate(.6deg)}
.cl-doc.sent,.cl-doc.sent:nth-child(even){transform:rotate(0deg) translateX(8px);box-shadow:none;background:transparent;border-color:var(--divide)}
.cl-doc.sent .cl-doc-top i,.cl-doc.sent .cl-doc-top span{color:#9aa398}
.cl-doc.sent::after{background:linear-gradient(225deg,rgba(1,56,6,.04) 0 50%,transparent 50%);border-color:var(--divide)}
.cl-doc-top{display:flex;align-items:center;gap:7px;padding-right:14px}
.cl-doc-top i{font-size:15px;color:var(--brand-500);flex:none;transition:color 460ms ease}
.cl-doc-top span{min-width:0;font-size:13px;font-weight:500;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color 460ms ease}
.cl-rule{margin-top:9px;display:flex;flex-direction:column;gap:5px}
.cl-rule span{height:2px;border-radius:var(--radius-pill);background:var(--border-soft)}
.cl-rule span:nth-child(1){width:100%}
.cl-rule span:nth-child(2){width:82%}
.cl-rule span:nth-child(3){width:60%}
.cl-hub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:206px;height:206px;margin:0 auto;padding:0 26px;background:var(--brand-500);border-radius:var(--radius-pill);color:var(--neutrals-white);text-align:center;box-shadow:0 2px 4px rgba(1,56,6,.16),0 14px 34px rgba(1,56,6,.2)}
.cl-mark{width:34px;height:34px;filter:brightness(0) invert(1)}
.cl-ring{position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);border-radius:var(--radius-pill);pointer-events:none;opacity:0}
.cl-wrap.working .cl-ring{opacity:1}
.cl-ring circle{fill:none;stroke:var(--brand-300);stroke-width:2;stroke-linecap:butt;stroke-dasharray:646;stroke-dashoffset:646;transform:rotate(-90deg);transform-origin:50% 50%}
.cl-wrap.working .cl-ring circle{animation:clTrace 1500ms cubic-bezier(.4,0,.2,1) forwards}
@keyframes clTrace{to{stroke-dashoffset:0}}
.cl-wave{position:absolute;inset:0;border-radius:var(--radius-pill);border:1.5px solid var(--brand-300);opacity:0;pointer-events:none}
.cl-wrap.working .cl-wave{animation:clWave 1600ms ease-out forwards}
.cl-wrap.working .cl-wave:nth-of-type(2){animation-delay:320ms}
@keyframes clWave{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.42)}}
.cl-hub-name{font-size:15px;font-weight:500;line-height:1.3}
.cl-rec{background:var(--neutrals-white);border:1px solid var(--border-soft);border-radius:12px;box-shadow:0 1px 2px rgba(1,56,6,.05),0 8px 22px rgba(1,56,6,.06),0 24px 54px rgba(1,56,6,.06);overflow:hidden}
.cl-rec-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 15px;border-bottom:1px solid var(--border-soft)}
.cl-rec-h{font-size:14px;font-weight:600}
.cl-tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:500;padding:3px 9px;border-radius:var(--radius-pill);background:var(--background);color:var(--fg2);transition:background 320ms ease,color 320ms ease}
.cl-wrap.done .cl-tag{background:rgba(63,208,122,.18);color:#1c7a25}
.cl-field{display:grid;grid-template-columns:minmax(0,124px) minmax(0,1fr);gap:12px;align-items:baseline;padding:8px 15px}
.cl-field + .cl-field{border-top:1px solid var(--border-soft)}
.cl-k{font-size:11.5px;font-weight:400;color:var(--fg2);line-height:1.3}
.cl-v{position:relative;min-height:15px;font-size:13px;font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-v b{font-weight:500;opacity:0;transition:opacity 300ms ease}
.cl-v.on b{opacity:1}
.cl-v::before{content:"";position:absolute;inset:2px 0;border-radius:3px;background:var(--background);transform-origin:left center;transition:transform 360ms cubic-bezier(.4,0,.2,1)}
.cl-v.on::before{transform:scaleX(0)}
.cl-from{margin-left:7px;font-size:10.5px;font-weight:400;color:var(--fg2);opacity:0;transition:opacity 300ms ease 120ms}
.cl-v.on .cl-from{opacity:1}
@media (max-width:980px){
  .cl-wrap{grid-template-columns:1fr;gap:20px;margin-top:32px}
  .cl-sources{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cl-doc{padding:8px 9px 9px}
  .cl-doc-top{gap:5px;padding-right:11px}
  .cl-doc-top i{font-size:13px}
  .cl-doc-top span{font-size:11.5px;white-space:normal}
  .cl-rule{margin-top:7px;gap:4px}
  .cl-hub{width:auto;height:auto;margin:0;padding:18px 16px;border-radius:12px;flex-direction:row;justify-content:flex-start;text-align:left;gap:12px}
  .cl-mark{width:26px;height:26px}
  .cl-ring{display:none}
  .cl-wave{border-radius:12px}
}
@media (max-width:520px){.cl-sources{grid-template-columns:repeat(2,minmax(0,1fr))}}