/* == CONTRACT CREATION JOURNEY — V1, FROZEN =============================================
   A SNAPSHOT. This file and js/contract-journey-v1.js are a byte-for-byte copy of
   css/contract-journey.css and js/contract-journey.js as they stood on 02 Aug 2026, with
   every `ccj` token renamed to `ccjv1`, taken so the journey's first finished look survives
   the redesign of the live one. Reached from Support > Contract Journey V1 in the sidebar
   and from nowhere else.

   DO NOT PORT CHANGES INTO IT. It has one job: to keep showing what the journey looked like
   before. Every fix, tweak and redesign belongs in the unsuffixed pair, which is what the
   topbar +, the Contracts listing and the Hire and Onboard card all still open.

   Prefixed `ccjv1-` throughout, which is what lets both stylesheets load at once: `ccj-` is
   the live journey's, `cc-` the cost calculator's, `aicj-` the original's. Nothing here
   overrides or depends on any of those files, and nothing outside this file uses `ccjv1-`.

   TWO STRUCTURAL RULES, and every screen of every stage inherits both.

   1. THE PAGE DOES NOT SCROLL — THE COLUMNS DO. #adt-content normally scrolls the whole page;
      while a ccjv1 page is mounted it becomes a fixed-height flex column instead, and every
      scrolling region below is an internal one with its own min-height:0.

   2. THE PANEL IS A QUARTER, AND IT STANDS. .ccjv1-panel is 25% of the body and is built once
      per STAGE. Screens change inside .ccjv1-work beside it; the panel is never remounted, so
      it keeps its scroll position, its spinner and its place for the whole stage.        == */

/* ---- WAYS IN -----------------------------------------------------------------------------
   One: the sidebar row. The three the live journey has — the topbar + on Contracts, "New
   request" on the Account Manager's page, and the pill on the Contracts listing — all still
   point at the live journey, so the buttons they use (`.am-head-new`, `.ccj-entry-btn`) are
   defined by contract-journey.css and are deliberately NOT redefined here. Copying them into
   a second global stylesheet would mean two files racing to style one button.

   `.ccjv1-entry-row` / `.ccjv1-entry-btn` are kept because the snapshot's own screens are
   free to use them, and because removing rules is how a snapshot stops being one. */
.ccjv1-entry-row{display:flex;align-items:center;gap:16px;align-self:flex-start;flex-shrink:0}
.ccjv1-entry-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border:none;border-radius:22px;background:var(--navy);color:#fff;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;transition:.15s;flex-shrink:0}
.ccjv1-entry-btn svg{width:13px;height:13px}
.ccjv1-entry-btn:hover{background:#1e293b;transform:translateY(-1px);box-shadow:0 4px 14px rgba(15,23,42,.18)}

/* ---- SHELL ---------------------------------------------------------------------------- */
.page-content.ccjv1-host{padding:18px 22px;display:flex;flex-direction:column;overflow:hidden}
.ccjv1-shell{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;max-width:1560px;width:100%;margin:0 auto}

/* ---- HEADER — one 34px row ------------------------------------------------------------- */
.ccjv1-head{display:flex;align-items:center;gap:10px;height:34px;flex-shrink:0;margin-bottom:12px}
.ccjv1-back{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--gray);cursor:pointer;transition:.15s;padding:0}
.ccjv1-back svg{width:14px;height:14px}
.ccjv1-back:hover{border-color:var(--navy);color:var(--navy)}
.ccjv1-head-step{flex-shrink:0;padding:4px 9px;border-radius:6px;background:var(--navy);color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.ccjv1-head-name{font-size:15px;font-weight:700;color:var(--navy);white-space:nowrap}
.ccjv1-head-model{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;padding:3px 9px;border:1px solid var(--border);border-radius:20px;font-size:10.5px;font-weight:700;color:var(--navy);background:var(--card);cursor:default;font-family:inherit}
.ccjv1-head-model.live{cursor:pointer;transition:.15s}
.ccjv1-head-model.live svg{width:10px;height:10px;color:var(--gray)}
.ccjv1-head-model.live:hover{border-color:var(--navy);background:var(--light)}
.ccjv1-head-agent{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:1px solid #e9d5ff;border-radius:20px;background:#faf5ff;color:#7c3aed;font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;transition:.15s;white-space:nowrap}
.ccjv1-head-agent svg{width:11px;height:11px}
.ccjv1-head-agent:hover{background:#f3e8ff}
.ccjv1-head-wait{margin-left:auto;font-size:11.5px;color:var(--gray);white-space:nowrap}
.ccjv1-head-wait b{color:var(--navy);font-weight:600}

/* ---- RAIL — nine stages in the two phases that behave differently ------------------------
   The rail is a shell holding two phase boxes; the boxes are the message. The gap between
   them is the split — no divider rule is needed once each side has an edge of its own — and
   the box you are in is the only one that lifts off the surface. Everything else is graded
   down from it: the phase behind you keeps its numerals in navy but goes flat, the phase
   ahead loses colour entirely. Nothing on the rail is the same weight as the stage you are
   standing on, which is the one thing the old version got wrong at every level at once. */
.ccjv1-rail{flex-shrink:0;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:6px;margin-bottom:12px;overflow:hidden}
.ccjv1-rail-scroll{display:flex;align-items:flex-end;overflow-x:auto;scrollbar-width:none;padding:4px 10px 5px}
.ccjv1-rail-scroll::-webkit-scrollbar{display:none}
.ccjv1-rail-scroll.tracked{align-items:stretch;gap:7px;padding:0}

/* THE PHASE BOX. `ahead` is the base state and reads as unbuilt ground; `done` firms up to
   show it was walked; `current` is the only one with a border and a shadow. */
.ccjv1-phase{display:flex;flex-direction:column;min-width:0;border:1px solid transparent;border-radius:10px;background:#f5f7fa;padding:7px 12px 8px;transition:background .3s,border-color .3s,box-shadow .3s}
.ccjv1-phase.current{background:var(--card);border-color:#d5dce5;box-shadow:0 1px 3px rgba(15,23,42,.07)}
.ccjv1-phase-head{display:flex;align-items:center;gap:7px;margin-bottom:7px;min-width:0}
/* The 1 and the 2. Says "there are two of these and this is which" without spending the word
   "phase" twice on a rail that has 74px of height to give. */
.ccjv1-phase-n{flex-shrink:0;width:15px;height:15px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800;background:#dde3ea;color:#8895a5;transition:.3s}
.ccjv1-phase.done .ccjv1-phase-n{background:#cfd8e3;color:#5b6878}
.ccjv1-phase.current .ccjv1-phase-n{background:var(--navy);color:#fff}
.ccjv1-phase-name{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#a3aebc;white-space:nowrap;transition:color .3s}
.ccjv1-phase.done .ccjv1-phase-name{color:var(--gray)}
.ccjv1-phase.current .ccjv1-phase-name{color:var(--navy)}
/* The rule that makes it a phase. Sentence case on purpose — it is meant to be read, not
   scanned, and it is the line that answers "why does the journey break here". */
.ccjv1-phase-rule{font-size:10px;font-weight:500;color:#aab4c0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;transition:color .3s}
.ccjv1-phase.current .ccjv1-phase-rule{color:var(--gray)}
.ccjv1-phase-count{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:20px;font-size:9.5px;font-weight:700;background:var(--navy);color:#fff;letter-spacing:.2px}
.ccjv1-phase-of{font-weight:600;opacity:.72}
.ccjv1-phase-count.done{background:#e6ebf1;color:var(--gray)}
.ccjv1-phase-count.done svg{width:9px;height:9px}
.ccjv1-phase-count.ahead{background:none;color:#aab4c0;padding:2px 0;font-weight:600}
.ccjv1-phase-steps{display:flex;align-items:flex-start;flex:1;min-width:0}

/* THE STEPS. Pending was #cbd5e1 on white — 1.5:1, invisible at 9.5px, and it made two
   thirds of the rail look broken rather than unreached. Pending now clears 3:1 and reads as
   a legible grey; the navy path behind the current dot carries the progress instead. */
.ccjv1-step{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;flex:0 0 auto;width:84px}
.ccjv1-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;flex-shrink:0;border:1.5px solid #d5dce5;background:var(--card);color:#94a0b0;transition:.25s}
.ccjv1-dot svg{width:11px;height:11px}
.ccjv1-dot.done{background:var(--navy);border-color:var(--navy);color:#fff}
.ccjv1-dot.current{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 0 0 4px rgba(15,23,42,.12)}
.ccjv1-phase.ahead .ccjv1-dot{background:#fbfcfd}
/* NAVY MEANS "THE PHASE YOU ARE IN". A closed phase is five solid navy dots and four filled
   connectors, and photographed beside a live phase that mass simply won the page — the eye
   went to the finished half rather than to the stage being worked. Once a phase is wholly
   behind you it recedes to grey: still unmistakably ticked off, no longer competing with the
   one dot that matters. */
.ccjv1-phase.done .ccjv1-dot.done{background:#98a3b2;border-color:#98a3b2}
.ccjv1-phase.done .ccjv1-line.filled{background:#c6cdd7}
.ccjv1-step-label{font-size:10px;font-weight:600;line-height:1.25;text-align:center;color:#8e9aa8;max-width:84px;transition:color .25s}
.ccjv1-step-label.done{color:var(--gray)}
.ccjv1-step-label.current{color:var(--navy);font-weight:700}
.ccjv1-line{height:1.5px;background:#dfe4ea;flex:1;min-width:8px;margin-top:10.5px;transition:background .3s}
.ccjv1-line.filled{background:var(--navy)}

/* ---- BODY — work area (3/4) beside the panel (1/4) ---------------------------------------
   .ccjv1-work splits again: the conversation column and the screen's own surface. On the first
   screen the conversation IS the screen and takes the whole area. */
.ccjv1-body{flex:1;min-height:0;display:flex;gap:12px}
.ccjv1-work{flex:1;min-width:0;min-height:0;display:flex;gap:12px}
/* ARRIVING AT A SCREEN. Without this the three-column layout appears fully formed in one frame,
   which reads as the page having been replaced rather than the run having moved on. Instead the
   conversation narrows from the width it occupied to its column, and the screen it made room for
   slides in beside it — one movement, and it is the same movement every time a stage advances. */
.ccjv1-enter .ccjv1-chat-col{animation:ccjv1Narrow .46s cubic-bezier(.4,0,.2,1) both}
.ccjv1-enter .ccjv1-screen{animation:ccjv1ScreenIn .46s cubic-bezier(.4,0,.2,1) both}
.ccjv1-enter .ccjv1-work-full{animation:ccjv1ScreenIn .34s cubic-bezier(.4,0,.2,1) both}
@keyframes ccjv1Narrow{
  0%{flex-basis:62%}
  100%{flex-basis:300px}
}
@keyframes ccjv1ScreenIn{
  0%{opacity:0;transform:translateX(18px)}
  60%{opacity:1}
  100%{opacity:1;transform:translateX(0)}
}
@media(prefers-reduced-motion:reduce){
  .ccjv1-enter .ccjv1-chat-col,.ccjv1-enter .ccjv1-screen,.ccjv1-enter .ccjv1-work-full,.ccjv1-empty.ghost{animation:none}
  .ccjv1-empty.ghost{display:none}
}
.ccjv1-work-full{flex:1;min-width:0;min-height:0;display:flex;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.ccjv1-chat-col{flex:0 0 300px;min-width:0;min-height:0;display:flex;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.ccjv1-screen{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.ccjv1-panel{flex:0 0 25%;min-width:300px;max-width:420px;min-height:0;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
/* Targeted by class, not by `.ccjv1-panel>div` — the progress bar is the panel's other child and
   must keep its 3px, not be handed flex:1 alongside the region it measures. */
.ccjv1-panel-inner{display:flex;flex-direction:column;min-height:0;flex:1}

/* ---- CHAT ------------------------------------------------------------------------------- */
.ccjv1-chat{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.ccjv1-chat-head{flex-shrink:0;display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--border)}
.ccjv1-chat-spark{width:28px;height:28px;flex-shrink:0;border-radius:9px;background:var(--ol);display:flex;align-items:center;justify-content:center;color:var(--navy)}
.ccjv1-chat-spark svg{width:14px;height:14px}
.ccjv1-chat-headtext{min-width:0;flex:1}
.ccjv1-chat-title{font-size:13px;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccjv1-chat-sub{font-size:10.5px;color:var(--gray);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccjv1-stream{position:relative;flex:1;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.08) transparent}
.ccjv1-stream::-webkit-scrollbar{width:4px}
.ccjv1-stream::-webkit-scrollbar-thumb{background:rgba(0,0,0,.10);border-radius:99px}
.ccjv1-chat.full .ccjv1-stream{padding:20px 26px;gap:14px}

.ccjv1-empty{margin:auto;text-align:center;max-width:440px;padding:20px 0}
/* The invitation on its way out. Absolutely positioned so it takes no space — the first
   messages lay out underneath it while it fades, instead of replacing it in a single frame. */
.ccjv1-empty.ghost{position:absolute;inset:0;margin:0;max-width:none;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 26px;pointer-events:none;z-index:2;animation:ccjv1EmptyOut .42s cubic-bezier(.4,0,.2,1) forwards}
.ccjv1-empty.ghost .ccjv1-empty-chips{width:100%;max-width:440px}
@keyframes ccjv1EmptyOut{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-10px) scale(.985)}
}
.ccjv1-empty-title{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:7px}
.ccjv1-empty-text{font-size:12.5px;color:var(--gray);line-height:1.6;margin-bottom:18px}
.ccjv1-empty-chips{display:flex;flex-direction:column;gap:7px}
.ccjv1-chip{padding:9px 13px;border:1px solid var(--border);border-radius:10px;background:var(--light);font-size:12px;font-weight:500;color:var(--navy);font-family:inherit;cursor:pointer;text-align:left;transition:.15s}
.ccjv1-chip:hover{border-color:var(--navy);background:var(--card)}

/* Only `.in` — the newest message — animates. The stream is rebuilt on every push, so
   animating all of them would replay the whole conversation each time a line lands. */
.ccjv1-msg{display:flex;gap:8px;align-items:flex-start}
.ccjv1-msg.in{animation:ccjv1In .26s ease both}
.ccjv1-msg.user{justify-content:flex-end}
@keyframes ccjv1In{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.ccjv1-av{width:22px;height:22px;flex-shrink:0;border-radius:7px;background:var(--ol);display:flex;align-items:center;justify-content:center;color:var(--navy);margin-top:2px}
.ccjv1-av svg{width:11px;height:11px}
.ccjv1-bubble{max-width:86%;padding:10px 12px;border-radius:12px;background:var(--light);border:1px solid var(--border);font-size:12px;line-height:1.6;color:var(--navy);min-width:0;word-wrap:break-word}
.ccjv1-msg.user .ccjv1-bubble{background:var(--navy);border-color:var(--navy);color:#fff;max-width:82%}
.ccjv1-chat.full .ccjv1-bubble{font-size:12.5px;max-width:78%}

.ccjv1-searching{font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--gray);margin-bottom:10px;line-height:1.5}
.ccjv1-skel{display:flex;align-items:center;gap:10px}
.ccjv1-skel-av{width:30px;height:30px;border-radius:50%;flex-shrink:0}
.ccjv1-skel-l{height:8px;border-radius:5px;margin-bottom:6px}
.ccjv1-skel-l:last-child{margin-bottom:0}
.ccjv1-skel-av,.ccjv1-skel-l{background:linear-gradient(90deg,#eef1f5 25%,#e2e8f0 50%,#eef1f5 75%);background-size:200% 100%;animation:ccjv1Shimmer 1.3s infinite}
@keyframes ccjv1Shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.ccjv1-match{background:var(--card)}
.ccjv1-match-tag{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#16a34a;margin-bottom:10px}
.ccjv1-match-tag svg{width:10px;height:10px}
.ccjv1-match-top{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.ccjv1-match-av{width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--ol);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:var(--navy)}
.ccjv1-match-name{font-size:12.5px;font-weight:700;color:var(--navy)}
.ccjv1-match-id{font-size:10.5px;color:var(--gray);margin-top:1px}
.ccjv1-match-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:9px;overflow:hidden}
.ccjv1-match-kv{background:var(--card);padding:7px 9px;min-width:0}
.ccjv1-match-kv span{display:block;font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--gray);margin-bottom:2px}
.ccjv1-match-kv b{font-size:11.5px;font-weight:600;color:var(--navy);word-break:break-word}

/* ---- DOCUMENT PARSING — the uploaded file, and what came out of it -------------------------
   One card that grows as each field lands, not a message per field. What a reviewer needs is
   not "what did you find" but "where did you get it and how sure are you", so every row cites
   the part of the document it came from and carries a confidence mark. */
.ccjv1-file{display:flex;align-items:center;gap:8px;background:var(--navy);border-color:var(--navy);color:#fff}
.ccjv1-file svg{width:14px;height:14px;flex-shrink:0;opacity:.8}
.ccjv1-file-n{font-size:11.5px;font-weight:600;min-width:0;word-break:break-all}
.ccjv1-file-s{font-size:10px;opacity:.6;flex-shrink:0}

.ccjv1-doc{background:var(--card);max-width:94%}
.ccjv1-doc-head{display:flex;align-items:center;gap:9px;padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:9px}
.ccjv1-doc-ico{width:28px;height:28px;flex-shrink:0;border-radius:8px;background:var(--ol);display:flex;align-items:center;justify-content:center;color:var(--navy)}
.ccjv1-doc-ico svg{width:13px;height:13px}
.ccjv1-doc-name{font-size:11.5px;font-weight:700;color:var(--navy);word-break:break-all}
.ccjv1-doc-stat{font-size:10.5px;color:var(--gray);margin-top:1px}
.ccjv1-doc-head .ccjv1-spin{margin-left:auto;flex-shrink:0}
/* Stacked, not columns. This lives in a 300px conversation column; a label/value split left the
   value about fifty pixels wide and wrapped a job description to one character per line.
   Label and confidence share the top line — they are both metadata about the value — and the
   value gets the full width beneath, with its citation under that. */
.ccjv1-doc-rows{display:flex;flex-direction:column;gap:2px}
.ccjv1-doc-row{padding:7px 0;border-bottom:1px dashed #eef1f5;animation:ccjv1EvIn .3s ease both;min-width:0}
.ccjv1-doc-row:last-child{border-bottom:none}
.ccjv1-doc-k{font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--gray);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccjv1-doc-v{font-size:12px;color:var(--navy);line-height:1.5;word-break:break-word;font-weight:500}
.ccjv1-doc-src{font-size:9.5px;font-style:italic;color:#94a3b8;margin-top:2px;line-height:1.4}
.ccjv1-doc-absent{margin-top:10px;padding:8px 10px;border-radius:7px;background:var(--light);border:1px solid var(--border);font-size:10.5px;color:var(--gray);line-height:1.5}
.ccjv1-doc-absent b{display:block;font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--navy);margin-bottom:2px}

/* ---- COMPOSER — pinned, never scrolls away ----------------------------------------------- */
.ccjv1-composer{flex-shrink:0;border-top:1px solid var(--border);padding:10px 12px 12px;background:var(--card)}
.ccjv1-chat.full .ccjv1-composer{padding:12px 26px 16px}
/* Directly above the input, not up in the header. Uploading a document is an alternative way of
   answering the same thing the input asks for, so it belongs in the band the eye is already on
   when it decides how to reply. Dashed, because it is a drop target in spirit. */
/* Upload is the action; the sample is the thing it acts on. So they share a row, and the sample
   is deliberately the quieter of the two — it is a way of getting unstuck, not the main path. */
.ccjv1-upload-row{display:flex;align-items:stretch;gap:6px;margin-bottom:8px}
.ccjv1-upload{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;min-width:0;padding:8px 12px;border:1px dashed #cbd5e1;border-radius:9px;background:var(--light);color:var(--gray);font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;transition:.15s}
.ccjv1-upload svg{width:13px;height:13px;flex-shrink:0}
.ccjv1-upload:hover{border-color:var(--navy);color:var(--navy);background:var(--card)}
.ccjv1-upload:active{transform:scale(.995)}
.ccjv1-sample-dl{display:flex;align-items:center;gap:5px;flex-shrink:0;padding:8px 11px;border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--gray);font-size:11px;font-weight:600;text-decoration:none;transition:.15s}
.ccjv1-sample-dl svg{width:13px;height:13px;flex-shrink:0}
.ccjv1-sample-dl:hover{border-color:var(--navy);color:var(--navy);background:var(--light)}
.ccjv1-models{display:flex;align-items:center;gap:6px;margin-bottom:9px;flex-wrap:wrap}
.ccjv1-models-lbl{font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--gray);margin-right:2px}
.ccjv1-model{padding:4px 11px;border:1px solid var(--border);border-radius:20px;background:var(--card);font-size:11px;font-weight:600;color:var(--gray);font-family:inherit;cursor:pointer;transition:.15s}
.ccjv1-model:hover{border-color:var(--navy);color:var(--navy)}
.ccjv1-model.on{background:var(--navy);border-color:var(--navy);color:#fff}
.ccjv1-input-row{display:flex;align-items:flex-end;gap:7px}
.ccjv1-input{flex:1;min-width:0;resize:none;padding:9px 11px;border:1.5px solid var(--border);border-radius:11px;font-size:12px;font-family:inherit;line-height:1.5;color:var(--navy);background:var(--light);max-height:110px;transition:.15s}
.ccjv1-input:focus{outline:none;border-color:var(--navy);background:var(--card)}
.ccjv1-send{width:34px;height:34px;flex-shrink:0;border:none;border-radius:10px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.ccjv1-send svg{width:14px;height:14px}
.ccjv1-send:hover{background:#1e293b;transform:translateY(-1px)}

/* ---- PROCESS PANEL — every sub-status, top to bottom, with its detail --------------------- */
.ccjv1-panel-prog{flex-shrink:0;height:3px;background:var(--ol)}
.ccjv1-panel-prog-fill{height:100%;background:var(--navy);transition:width .45s cubic-bezier(.4,0,.2,1)}
.ccjv1-panel-head{flex-shrink:0;padding:12px 14px 11px;border-bottom:1px solid var(--border)}
.ccjv1-panel-title{font-size:13px;font-weight:700;color:var(--navy)}
.ccjv1-panel-meta{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:10.5px;color:var(--gray);flex-wrap:wrap}
.ccjv1-panel-count{font-weight:700;color:var(--navy)}
.ccjv1-panel-dot{opacity:.5}
.ccjv1-panel-sla{margin-left:auto;padding:2px 7px;border-radius:5px;background:var(--ol);font-size:9.5px;font-weight:700;color:var(--gray)}
.ccjv1-panel-body{flex:1;min-height:0;overflow-y:auto;padding:6px;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.08) transparent}
.ccjv1-panel-body::-webkit-scrollbar{width:4px}
.ccjv1-panel-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.10);border-radius:99px}

.ccjv1-row{padding:8px 8px 9px;border-radius:10px;margin-bottom:2px;transition:background .25s}
.ccjv1-row.current{background:var(--light);box-shadow:inset 2px 0 0 var(--navy)}
.ccjv1-row-top{display:flex;align-items:flex-start;gap:9px}
.ccjv1-row-ico{width:19px;height:19px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;border:1.5px solid var(--border);color:#cbd5e1;background:var(--card);margin-top:1px}
.ccjv1-row-ico svg{width:10px;height:10px}
.ccjv1-row.done .ccjv1-row-ico{background:var(--navy);border-color:var(--navy);color:#fff}
.ccjv1-row.current .ccjv1-row-ico{border-color:var(--navy);background:var(--card)}
.ccjv1-row-main{flex:1;min-width:0}
.ccjv1-row-label{font-size:12px;font-weight:600;color:var(--navy);line-height:1.4}
.ccjv1-row.pending .ccjv1-row-label{color:#94a3b8;font-weight:500}
.ccjv1-row-cond{display:block;font-size:9.5px;font-style:italic;color:#94a3b8;margin-top:1px}
.ccjv1-row-sum{font-size:11px;color:var(--gray);margin-top:2px;line-height:1.4}
.ccjv1-row-owner{flex-shrink:0;min-width:30px;text-align:center;padding:2px 6px;border-radius:5px;background:var(--ol);font-size:9px;font-weight:700;letter-spacing:.3px;color:var(--gray);margin-top:2px}
.ccjv1-row-owner.auto{background:#f5f3ff;color:#7c3aed}

.ccjv1-spin{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ol);border-top-color:var(--navy);animation:ccjv1Spin .65s linear infinite}
@keyframes ccjv1Spin{to{transform:rotate(360deg)}}

/* ---- ROW DETAIL — the same 28px indent whatever the row is saying -------------------------- */
.ccjv1-ev{margin:7px 0 0 28px;padding:9px 11px;border:1px solid var(--border);border-radius:9px;background:var(--card)}
.ccjv1-ev.pending{background:transparent;border-style:dashed;border-color:#e8edf3}
.ccjv1-will{font-size:11px;color:#94a3b8;line-height:1.55}
.ccjv1-will-sla{font-size:9.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#cbd5e1;margin-top:5px}
/* A line not yet reached holds its space but stays invisible, so the block does not jump each
   time a beat lands. Only `.new` — the line that just arrived — animates; the ones already on
   screen are painted at rest. A keyframe rather than a transition on purpose: the container is
   replaced on each beat, and a transition has no previous state to run from. */
.ccjv1-ev.skipped{background:transparent;border-style:dashed;border-color:#e8edf3;opacity:.8}
@keyframes ccjv1EvIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* ---- THE ACTION LOG — one line per thing the step actually does ------------------------------
   Only the line currently running animates. The list is rebuilt on every beat, so animating the
   finished ones again would read as a flicker rather than as progress. */
.ccjv1-act{display:flex;align-items:flex-start;gap:7px;padding:4px 0}
.ccjv1-act.new{animation:ccjv1EvIn .3s cubic-bezier(.4,0,.2,1) both}
.ccjv1-act-ico{width:14px;height:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px;color:#16a34a}
.ccjv1-act-ico svg{width:11px;height:11px}
.ccjv1-act-body{flex:1;min-width:0;display:flex;flex-direction:column}
.ccjv1-act-label{font-size:11px;color:var(--navy);line-height:1.45;font-weight:500}
.ccjv1-act.doing .ccjv1-act-label{color:var(--gray)}
.ccjv1-act-label.ok{color:#15803d;font-weight:600}
.ccjv1-spin.sm{width:10px;height:10px;border-width:1.5px}

.ccjv1-act-rows{display:flex;flex-direction:column;gap:1px;margin-top:5px;border:1px solid var(--border);border-radius:7px;overflow:hidden;background:var(--border)}
.ccjv1-act-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:5px 8px;background:var(--card)}
.ccjv1-act-row.off{opacity:.42}
.ccjv1-act-row b{font-size:10px;font-weight:600;color:var(--navy);min-width:0;line-height:1.35}
.ccjv1-act-row i{font-size:10px;font-style:normal;color:var(--gray);text-align:right;flex-shrink:0;max-width:52%;word-break:break-word}
.ccjv1-act-more{padding:4px 8px;background:var(--light);font-size:9.5px;font-weight:600;color:var(--gray)}
.ccjv1-act-check{display:flex;align-items:flex-start;gap:6px;padding:5px 8px;background:var(--card)}
.ccjv1-act-check>span:last-child{min-width:0;display:flex;flex-direction:column}
.ccjv1-act-check b{font-size:10px;font-weight:500;color:var(--navy);line-height:1.4}
.ccjv1-act-check i{font-size:9.5px;font-style:normal;color:var(--gray);margin-top:1px;line-height:1.4}
.ccjv1-act-vd{flex-shrink:0;width:12px;text-align:center;font-size:10px;font-weight:700;line-height:1.4}
.ccjv1-act-check.pass .ccjv1-act-vd{color:#16a34a}
.ccjv1-act-check.fail .ccjv1-act-vd{color:#dc2626}
.ccjv1-act-check.na .ccjv1-act-vd{color:#94a3b8}
.ccjv1-ev-more{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:7px;padding:6px 9px;border:1px solid var(--border);border-radius:7px;background:var(--light);font-size:10.5px;font-weight:600;color:var(--navy);font-family:inherit;cursor:pointer;transition:.15s}
.ccjv1-ev-more svg{width:10px;height:10px;color:var(--gray)}
.ccjv1-ev-more:hover{border-color:var(--navy);background:var(--card)}

/* ---- HELD — done its part, waiting on the rest of the stage --------------------------------- */
.ccjv1-hold{position:relative;margin-top:8px;padding:8px 10px 8px 12px;border-radius:7px;background:#fffbeb;border:1px solid #fde68a;font-size:10.5px;line-height:1.55;color:#78350f;overflow:hidden}
.ccjv1-hold-bar{position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#f59e0b,#fbbf24);animation:ccjv1HoldPulse 1.8s ease-in-out infinite}
@keyframes ccjv1HoldPulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ---- THE GATE — where a person is asked ------------------------------------------------------ */
.ccjv1-gate{margin:7px 0 0 28px;padding:11px 12px;border-radius:9px;border:1px solid #fde68a;background:#fffbeb}
.ccjv1-gate.external{border-color:#bfdbfe;background:#eff6ff}
.ccjv1-gate.stopped{border-color:#fecaca;background:#fef2f2}
.ccjv1-gate-ask{font-size:12px;font-weight:700;color:var(--navy);line-height:1.45;margin-bottom:5px}
.ccjv1-gate-why{font-size:10.5px;color:var(--gray);line-height:1.55;margin-bottom:9px}
.ccjv1-gate-who{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--gray);margin-bottom:10px}
.ccjv1-gate-behalf{margin-left:auto;flex-shrink:0;padding:2px 6px;border-radius:5px;background:var(--card);border:1px solid var(--border);font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--gray)}
.ccjv1-gate-av{width:19px;height:19px;flex-shrink:0;border-radius:50%;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:700;color:var(--navy)}
.ccjv1-gate-btns{display:flex;gap:7px}
.ccjv1-gate-btn{flex:1;padding:8px 10px;border-radius:8px;border:1px solid transparent;font-size:11.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:.15s}
.ccjv1-gate-btn.go{background:var(--navy);color:#fff}
.ccjv1-gate-btn.go:hover{background:#1e293b}
.ccjv1-gate-btn.stop{background:var(--card);border-color:var(--border);color:#dc2626}
.ccjv1-gate-btn.stop:hover{border-color:#dc2626;background:#fef2f2}
.ccjv1-gate-btn.ghost{background:var(--card);border-color:var(--border);color:var(--navy)}
.ccjv1-gate-btn.ghost:hover{border-color:var(--navy)}
.ccjv1-gate-locked{font-size:10.5px;color:var(--gray);font-style:italic}

/* ---- THE CONTRACT FORM ------------------------------------------------------------------------ */
.ccjv1-form-scroll{flex:1;min-height:0;overflow-y:auto;padding:20px 24px 24px;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.08) transparent}
.ccjv1-form-scroll::-webkit-scrollbar{width:5px}
.ccjv1-form-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.10);border-radius:99px}
.ccjv1-form-head{margin-bottom:14px}
.ccjv1-form-title{font-size:19px;font-weight:700;color:var(--navy);letter-spacing:-.2px}
.ccjv1-form-sub{font-size:12px;color:var(--gray);margin-top:2px}
.ccjv1-prefill{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border-radius:11px;background:var(--light);border:1px solid var(--border);margin-bottom:18px}
.ccjv1-prefill-ico{width:28px;height:28px;flex-shrink:0;border-radius:9px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--navy)}
.ccjv1-prefill-ico svg{width:13px;height:13px}
.ccjv1-prefill-t{font-size:12.5px;font-weight:700;color:var(--navy)}
.ccjv1-prefill-s{font-size:11.5px;color:var(--gray);margin-top:2px;line-height:1.5}

.ccjv1-fsec{border:1px solid var(--border);border-radius:12px;margin-bottom:14px;overflow:hidden}
.ccjv1-fsec-t{padding:12px 16px;background:#fafbfc;border-bottom:1px solid var(--border);font-size:13px;font-weight:700;color:var(--navy)}
.ccjv1-fgrid{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ccjv1-fgroup{min-width:0;display:flex;flex-direction:column}
.ccjv1-fgroup.full{grid-column:1/-1}
/* The field the conversation is asking about right now. The ring is how the two halves of the
   screen stay tied together — the question on the left always has a visible target on the right. */
.ccjv1-fgroup.asking{position:relative}
.ccjv1-fgroup.asking .ccjv1-inp,.ccjv1-fgroup.asking .ccjv1-radios{box-shadow:0 0 0 3px rgba(15,23,42,.10);border-color:var(--navy)}
/* The field a document just landed in. A keyframe, not a transition — the form is re-rendered
   on every fill, so a transition would have no previous state to run from. */
.ccjv1-fgroup.just .ccjv1-inp{animation:ccjv1JustFill .7s ease both}
@keyframes ccjv1JustFill{
  0%{background:#dcfce7;border-color:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.22)}
  70%{background:#f0fdf4;border-color:#86efac;box-shadow:0 0 0 2px rgba(74,222,128,.10)}
  100%{background:var(--card);border-color:var(--border);box-shadow:none}
}
.ccjv1-flabel{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--navy);margin-bottom:6px}
.ccjv1-req{color:#dc2626;font-weight:700}
.ccjv1-ai{padding:1px 5px;border-radius:4px;background:#f5f3ff;color:#7c3aed;font-size:8.5px;font-weight:700;letter-spacing:.4px;cursor:help}
.ccjv1-inp{width:100%;min-width:0;height:38px;padding:0 11px;border:1px solid var(--border);border-radius:9px;font-size:12.5px;font-family:inherit;color:var(--navy);background:var(--card);outline:none;transition:.15s;box-sizing:border-box}
.ccjv1-inp:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(15,23,42,.08)}
.ccjv1-ta{height:auto;padding:9px 11px;line-height:1.55;resize:vertical;min-height:74px}
select.ccjv1-inp{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7282' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:13px;padding-right:30px}
.ccjv1-fgroup.missing .ccjv1-inp{border-color:#fca5a5;background:#fffafa}
.ccjv1-fhint{font-size:10.5px;color:var(--gray);margin-top:5px;line-height:1.5}
.ccjv1-money,.ccjv1-unit{display:flex;align-items:center;gap:8px}
.ccjv1-money>span{font-size:12.5px;font-weight:600;color:var(--gray);flex-shrink:0}
.ccjv1-unit>span{font-size:12px;color:var(--gray);flex-shrink:0}
.ccjv1-radios{display:flex;flex-direction:column;gap:7px}
.ccjv1-radio{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--border);border-radius:9px;background:var(--card);font-size:12.5px;font-weight:500;color:var(--navy);font-family:inherit;cursor:pointer;text-align:left;transition:.15s}
.ccjv1-radio:hover{border-color:var(--navy)}
.ccjv1-radio-dot{width:15px;height:15px;flex-shrink:0;border-radius:50%;border:2px solid #d1d5db;transition:.15s}
.ccjv1-radio.on{border-color:var(--navy);background:var(--light)}
.ccjv1-radio.on .ccjv1-radio-dot{border-color:var(--navy);border-width:4px}

.ccjv1-form-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0 4px;flex-wrap:wrap}
.ccjv1-form-foot-note{font-size:12px;color:var(--gray)}
.ccjv1-form-foot-note b{color:#dc2626;font-weight:700}
/* Replaces the submit button. There is no decision left to take, so this reports rather than
   asks — and it is visible for the whole pause, so the screen changing is never a surprise. */
.ccjv1-form-foot-go{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;border-radius:10px;background:var(--light);border:1px solid var(--border);font-size:12px;font-weight:600;color:var(--navy)}
.ccjv1-form-foot-go .ccjv1-spin{flex-shrink:0}
.ccjv1-primary{padding:11px 22px;border:none;border-radius:10px;background:var(--navy);color:#fff;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:.15s}
.ccjv1-primary:hover{background:#1e293b;transform:translateY(-1px)}
.ccjv1-primary.disabled,.ccjv1-primary:disabled{background:#e2e8f0;color:#94a3b8;cursor:not-allowed;transform:none}

/* ---- ENGAGEMENT MODEL — its own page, before the journey frame exists -------------------------
   Centred in the viewport with nothing around it: no rail, no panel, no step counter. The three
   cards ARE the screen. */
.ccjv1-model-page{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.ccjv1-model-back{position:absolute;top:0;left:0;z-index:2}
.ccjv1-model-screen{flex:1;min-height:0;overflow-y:auto;padding:38px 34px;display:flex;flex-direction:column;justify-content:center;scrollbar-width:thin}
.ccjv1-model-screen::-webkit-scrollbar{width:5px}
.ccjv1-model-screen::-webkit-scrollbar-thumb{background:rgba(0,0,0,.10);border-radius:99px}
.ccjv1-model-head{text-align:center;max-width:560px;margin:0 auto 28px}
.ccjv1-model-title{font-size:22px;font-weight:700;color:var(--navy);letter-spacing:-.3px;margin-bottom:8px}
.ccjv1-model-sub{font-size:12.5px;color:var(--gray);line-height:1.6}
.ccjv1-model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:960px;margin:0 auto;width:100%}
.ccjv1-mcard{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:22px 20px;border:1.5px solid var(--border);border-radius:14px;background:var(--card);font-family:inherit;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s}
.ccjv1-mcard:hover{border-color:#94a3b8;transform:translateY(-3px);box-shadow:0 10px 28px rgba(15,23,42,.09)}
.ccjv1-mcard.on{border-color:var(--navy);box-shadow:0 0 0 3px rgba(15,23,42,.07)}
.ccjv1-mcard-top{display:flex;align-items:flex-start;justify-content:space-between;width:100%;margin-bottom:14px}
.ccjv1-mcard-ico{width:38px;height:38px;border-radius:11px;background:var(--ol);display:flex;align-items:center;justify-content:center;color:var(--navy);flex-shrink:0;transition:.18s}
.ccjv1-mcard-ico svg{width:18px;height:18px}
.ccjv1-mcard.on .ccjv1-mcard-ico{background:var(--navy);color:#fff}
.ccjv1-mcard-check{width:20px;height:20px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;transform:scale(.6);transition:.18s}
.ccjv1-mcard-check svg{width:10px;height:10px}
.ccjv1-mcard.on .ccjv1-mcard-check{opacity:1;transform:scale(1)}
.ccjv1-mcard-title{font-size:15px;font-weight:700;color:var(--navy);line-height:1.3}
.ccjv1-mcard-sub{font-size:11px;font-weight:600;color:var(--gray);margin-top:2px;line-height:1.4}
.ccjv1-mcard-desc{font-size:12px;color:var(--gray);line-height:1.6;margin-top:12px}
@media(max-width:1160px){
  .ccjv1-model-grid{grid-template-columns:1fr;max-width:520px}
  .ccjv1-mcard-desc{margin-top:8px}
  .ccjv1-model-screen{justify-content:flex-start;padding:44px 22px 22px}
}

/* ---- STAGE 2: THE QUOTE ------------------------------------------------------------------------
   Fills in as the sub-statuses beside it settle. A pending line holds its space with a shimmer
   rather than appearing from nothing, so the card never reflows as the numbers arrive. */
.ccjv1-q{flex:1;min-height:0;overflow-y:auto;padding:22px 24px 26px;scrollbar-width:thin}
.ccjv1-q::-webkit-scrollbar{width:5px}
.ccjv1-q::-webkit-scrollbar-thumb{background:rgba(0,0,0,.10);border-radius:99px}
.ccjv1-q-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.ccjv1-q-title{font-size:19px;font-weight:700;color:var(--navy);letter-spacing:-.2px}
.ccjv1-q-sub{font-size:12px;color:var(--gray);margin-top:2px}
.ccjv1-q-status{flex-shrink:0;padding:4px 11px;border-radius:20px;background:#fef3c7;color:#92400e;font-size:10.5px;font-weight:700;letter-spacing:.3px}
.ccjv1-q-status.ok{background:#dcfce7;color:#15803d}
.ccjv1-q-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:14px}
.ccjv1-q-sec{padding:11px 15px;background:#fafbfc;border-bottom:1px solid var(--border);font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--gray)}
.ccjv1-q-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 15px;border-bottom:1px solid var(--border)}
.ccjv1-q-k{font-size:12.5px;font-weight:600;color:var(--navy);min-width:0}
.ccjv1-q-k span{display:block;font-size:10.5px;font-weight:400;color:var(--gray);margin-top:1px}
.ccjv1-q-v{font-size:13px;font-weight:600;color:var(--navy);flex-shrink:0;text-align:right}
.ccjv1-q-row.pend .ccjv1-q-k{color:#94a3b8}
.ccjv1-q-skel{display:block;width:78px;height:11px;border-radius:5px;background:linear-gradient(90deg,#eef1f5 25%,#e2e8f0 50%,#eef1f5 75%);background-size:200% 100%;animation:ccjv1Shimmer 1.3s infinite}
.ccjv1-q-total{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;background:var(--navy)}
.ccjv1-q-total span{font-size:12px;font-weight:600;color:#cbd5e1}
.ccjv1-q-total b{font-size:16px;font-weight:700;color:#fff}
.ccjv1-q-meta{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.ccjv1-q-mrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 15px;border-bottom:1px solid var(--border)}
.ccjv1-q-mrow:last-child{border-bottom:none}
.ccjv1-q-mrow span{font-size:11.5px;color:var(--gray)}
.ccjv1-q-mrow b{font-size:12px;font-weight:600;color:var(--navy);text-align:right}
.ccjv1-q-mrow.pend b{color:#94a3b8;font-weight:500}
.ccjv1-q-note{margin-top:14px;padding:11px 13px;border-radius:9px;background:#f0fdf4;border:1px solid #bbf7d0;font-size:12px;color:#15803d}

/* ---- STAGE 3: THE CLIENT THREAD ----------------------------------------------------------------
   Four kinds of message, and they look different because they carry different weight: what we
   sent, what the client sent, a system note, and a draft nobody has sent yet. A draft styled like
   a sent message would be the worst possible confusion on a screen whose job is talking to a
   customer, so it is the only one with a border and a button. */
.ccjv1-chat-col.wide{flex:0 0 380px}
.ccjv1-chat-av{width:28px;height:28px;flex-shrink:0;border-radius:9px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700}

.ccjv1-cmsg{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.ccjv1-cmsg.in{animation:ccjv1In .26s ease both}
.ccjv1-cmsg.us{align-items:flex-end}
.ccjv1-cmsg>i{font-size:9.5px;font-style:normal;color:#94a3b8;padding:0 2px}
.ccjv1-cbubble{max-width:100%;padding:10px 12px;border-radius:12px;font-size:12px;line-height:1.6;background:var(--light);border:1px solid var(--border);color:var(--navy);word-wrap:break-word}
.ccjv1-cmsg.us .ccjv1-cbubble{background:var(--navy);border-color:var(--navy);color:#fff}
.ccjv1-cbubble.accept{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
.ccjv1-cmsg.us .ccjv1-cbubble.accept{background:#f0fdf4;color:#15803d}
.ccjv1-cmsg.note{align-items:center;flex-direction:row;justify-content:center;gap:7px;padding:2px 0}
.ccjv1-cmsg.note span{font-size:10px;color:#94a3b8}
.ccjv1-cmsg.note.chase span{color:#b45309;font-weight:600}
.ccjv1-cmsg.note i{font-size:9.5px;color:#cbd5e1}

.ccjv1-cbubble.draft{background:#faf5ff;border:1px dashed #d8b4fe;color:var(--navy);max-width:100%}
.ccjv1-draft-tag{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#7c3aed;margin-bottom:7px}
.ccjv1-draft-tag svg{width:10px;height:10px}
.ccjv1-draft-btns{margin-top:10px}
.ccjv1-draft-send{padding:7px 14px;border:none;border-radius:8px;background:#7c3aed;color:#fff;font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;transition:.15s}
.ccjv1-draft-send:hover{background:#6d28d9}
.ccjv1-draft-note{display:flex;align-items:center;gap:6px;margin-bottom:8px;padding:6px 9px;border-radius:7px;background:#faf5ff;border:1px solid #e9d5ff;font-size:10.5px;font-weight:600;color:#7c3aed}
.ccjv1-draft-note svg{width:10px;height:10px;flex-shrink:0}

/* The quote itself, inside the thread. v2 shows what moved rather than only the new number. */
.ccjv1-cbubble.quote{background:var(--card);border-color:var(--border);padding:0;overflow:hidden;width:100%}
.ccjv1-qc-head{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#fafbfc;border-bottom:1px solid var(--border)}
.ccjv1-qc-v{padding:2px 7px;border-radius:5px;background:var(--navy);color:#fff;font-size:9px;font-weight:700;letter-spacing:.4px}
.ccjv1-qc-name{font-size:10.5px;color:var(--gray);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccjv1-qc-total{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:11px 12px 4px}
.ccjv1-qc-total span{font-size:10.5px;color:var(--gray)}
.ccjv1-qc-total b{font-size:16px;font-weight:700;color:var(--navy)}
.ccjv1-qc-was{padding:0 12px 9px;font-size:10px;color:#15803d;font-weight:600}
/* A terms change is not a saving, so it is not green. It reports what moved, in neutral. */
.ccjv1-qc-was.terms{color:var(--gray);font-weight:500;line-height:1.5}
.ccjv1-qc-lines{display:flex;flex-wrap:wrap;gap:1px;background:var(--border);border-top:1px solid var(--border)}
.ccjv1-qc-lines span{flex:1;min-width:88px;padding:7px 10px;background:var(--card);font-size:11px;color:var(--navy)}
.ccjv1-qc-lines b{display:block;font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--gray);margin-bottom:2px}

/* ---- STAGE 3 SCREEN — has it been opened, when did I chase, what did they say ------------------ */
.ccjv1-sent{flex:1;min-height:0;overflow-y:auto;padding:22px 24px 26px;scrollbar-width:thin}
.ccjv1-sent::-webkit-scrollbar{width:5px}
.ccjv1-sent::-webkit-scrollbar-thumb{background:rgba(0,0,0,.10);border-radius:99px}
.ccjv1-sent-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:20px}
.ccjv1-sent-title{font-size:19px;font-weight:700;color:var(--navy);letter-spacing:-.2px}
.ccjv1-sent-sub{font-size:12px;color:var(--gray);margin-top:2px}
.ccjv1-sent-state{flex-shrink:0;padding:4px 11px;border-radius:20px;background:var(--ol);color:var(--gray);font-size:10.5px;font-weight:700;letter-spacing:.3px}
.ccjv1-sent-state.warn{background:#fef3c7;color:#92400e}
.ccjv1-sent-state.ok{background:#dcfce7;color:#15803d}

.ccjv1-tl{position:relative;padding-left:2px;margin-bottom:22px}
.ccjv1-tl-row{position:relative;display:flex;align-items:flex-start;gap:12px;padding:0 0 16px 18px}
.ccjv1-tl-row:before{content:'';position:absolute;left:4px;top:12px;bottom:0;width:1.5px;background:var(--border)}
.ccjv1-tl-row:last-child:before{display:none}
.ccjv1-tl-dot{position:absolute;left:0;top:4px;width:9px;height:9px;border-radius:50%;background:var(--card);border:1.5px solid var(--border)}
.ccjv1-tl-row.done .ccjv1-tl-dot{background:var(--navy);border-color:var(--navy)}
.ccjv1-tl-body{flex:1;min-width:0}
.ccjv1-tl-label{font-size:12.5px;font-weight:600;color:#94a3b8;line-height:1.4}
.ccjv1-tl-row.done .ccjv1-tl-label{color:var(--navy)}
.ccjv1-tl-sub{font-size:11px;color:var(--gray);margin-top:1px;line-height:1.45}
.ccjv1-tl-when{flex-shrink:0;font-size:11px;color:var(--gray);white-space:nowrap;padding-top:1px}

/* Demo scaffolding, and it says so. Fires the same events the script does. */
.ccjv1-sim{border:1px dashed #cbd5e1;border-radius:11px;padding:13px 14px;background:var(--light)}
.ccjv1-sim-head{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--gray);margin-bottom:10px}
.ccjv1-sim-head span{padding:1px 6px;border-radius:4px;background:var(--card);border:1px solid var(--border);font-size:8.5px;color:#94a3b8}
.ccjv1-sim-btns{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px}
.ccjv1-sim-btn{padding:7px 13px;border:1px solid var(--border);border-radius:8px;background:var(--card);font-size:11.5px;font-weight:600;color:var(--navy);font-family:inherit;cursor:pointer;transition:.15s}
.ccjv1-sim-btn:hover:not(:disabled){border-color:var(--navy);transform:translateY(-1px)}
.ccjv1-sim-btn:disabled{opacity:.4;cursor:not-allowed}
.ccjv1-sim-note{font-size:10.5px;color:#94a3b8;line-height:1.5}

@media(max-width:1380px){.ccjv1-chat-col.wide{flex:0 0 330px}}
@media(max-width:1160px){.ccjv1-chat-col.wide{flex:0 0 280px}}

/* ---- STAGE 4: DEAL WON, ACCOUNT CREATED --------------------------------------------------------
   Three bands: what was won, what was provisioned, who now owns the relationship. The won band is
   the only place in nine stages that states a commercial outcome as an outcome, so it is the only
   thing on the journey allowed to be this loud. */
.ccjv1-acct{flex:1;min-height:0;overflow-y:auto;padding:22px 24px 26px;scrollbar-width:thin}
.ccjv1-acct::-webkit-scrollbar{width:5px}
.ccjv1-acct::-webkit-scrollbar-thumb{background:rgba(0,0,0,.10);border-radius:99px}

.ccjv1-won{position:relative;overflow:hidden;padding:22px 24px;border-radius:14px;margin-bottom:14px;
  background:var(--light);border:1px solid var(--border);transition:.4s}
.ccjv1-won.on{background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);border-color:#0f172a}
.ccjv1-won-tag{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--gray);margin-bottom:9px;transition:.3s}
.ccjv1-won.on .ccjv1-won-tag{color:#4ade80}
.ccjv1-won-val{display:flex;align-items:baseline;gap:8px;font-size:32px;font-weight:800;letter-spacing:-1px;color:#cbd5e1;line-height:1;transition:.3s}
.ccjv1-won.on .ccjv1-won-val{color:#fff}
.ccjv1-won-val span{font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--gray)}
.ccjv1-won.on .ccjv1-won-val span{color:#94a3b8}
.ccjv1-won-sub{font-size:12px;color:var(--gray);margin-top:9px;line-height:1.5}
.ccjv1-won.on .ccjv1-won-sub{color:#94a3b8}

.ccjv1-pv{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:14px}
.ccjv1-pv-head{display:flex;align-items:center;gap:9px;padding:11px 15px;background:#fafbfc;border-bottom:1px solid var(--border);font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--gray)}
.ccjv1-pv-note{margin-left:auto;letter-spacing:0;text-transform:none;font-weight:500;font-size:10.5px;color:#b45309}
.ccjv1-pv-note.new{color:#15803d}
.ccjv1-pv-row{display:flex;align-items:center;gap:10px;padding:10px 15px;border-bottom:1px solid var(--border)}
.ccjv1-pv-row:last-child{border-bottom:none}
.ccjv1-pv-tick{width:16px;height:16px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:#fff;transition:.25s}
.ccjv1-pv-tick svg{width:9px;height:9px}
.ccjv1-pv-row.done .ccjv1-pv-tick{background:#16a34a;border-color:#16a34a}
.ccjv1-pv-k{font-size:12px;color:var(--gray);flex:1;min-width:0}
.ccjv1-pv-row.done .ccjv1-pv-k{color:var(--navy);font-weight:500}
.ccjv1-pv-v{font-size:12px;font-weight:600;color:#94a3b8;text-align:right;word-break:break-all}
.ccjv1-pv-row.done .ccjv1-pv-v{color:var(--navy)}

.ccjv1-csm{display:flex;align-items:center;gap:13px;padding:15px 16px;border:1px solid var(--border);border-radius:12px;transition:.3s}
.ccjv1-csm.on{border-color:#bbf7d0;background:#f0fdf4}
.ccjv1-csm-av{width:44px;height:44px;flex-shrink:0;border-radius:50%;background:var(--ol);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--navy);transition:.3s}
.ccjv1-csm.on .ccjv1-csm-av{background:var(--navy);color:#fff}
.ccjv1-csm-body{flex:1;min-width:0}
.ccjv1-csm-name{font-size:14px;font-weight:700;color:var(--navy)}
.ccjv1-csm-role{font-size:11.5px;color:var(--gray);margin-top:1px}
.ccjv1-csm-mail{font-size:11px;color:#94a3b8;margin-top:2px;word-break:break-all}
.ccjv1-csm-state{flex-shrink:0;padding:4px 10px;border-radius:20px;background:var(--ol);font-size:10px;font-weight:700;letter-spacing:.3px;color:var(--gray)}
.ccjv1-csm.on .ccjv1-csm-state{background:#dcfce7;color:#15803d}

.ccjv1-acct-foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;animation:ccjv1In .3s ease both}
.ccjv1-acct-done{font-size:12px;color:var(--gray)}

/* The CSM introduction, in the client thread. */
.ccjv1-cbubble.csm{background:var(--card);border-color:var(--border);color:var(--navy)}
.ccjv1-cmsg.us .ccjv1-cbubble.csm{background:var(--card);border-color:var(--border);color:var(--navy)}
.ccjv1-csmc-top{display:flex;align-items:center;gap:9px;padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--border)}
.ccjv1-csmc-av{width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700}
.ccjv1-csmc-top b{display:block;font-size:12.5px;font-weight:700;color:var(--navy)}
.ccjv1-csmc-top i{display:block;font-size:10.5px;font-style:normal;color:var(--gray);margin-top:1px}

/* ---- STAGE 5: THE MASTER SERVICES AGREEMENT ----------------------------------------------------
   Rendered as a document, not as a form. Paper white on a grey desk, a real header block, numbered
   clauses in a serif face and signature blocks that fill in as each party signs. It has to read as
   something a general counsel would put their name on. */
.ccjv1-msa-wrap{flex:1;min-height:0;overflow-y:auto;padding:20px;background:#eef1f5;scrollbar-width:thin}
.ccjv1-msa-wrap::-webkit-scrollbar{width:6px}
.ccjv1-msa-wrap::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:99px}
/* NOT `.ccjv1-doc`. That belongs to the document-extraction card in the chat, and defining it a
   second time here put a 720px page with 44px padding inside a 300px chat bubble — the text
   wrapped to one character per line. Third class-name collision in this file; the rule is that
   two components never share a root, and no class is a prefix of another. */
.ccjv1-msa{position:relative;max-width:720px;margin:0 auto;background:#fff;border:1px solid #dbe1e8;border-radius:4px;box-shadow:0 4px 22px rgba(15,23,42,.10);padding:38px 44px 44px}
.ccjv1-msa.pending{opacity:.45}
.ccjv1-msa-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-bottom:18px;border-bottom:2px solid var(--navy);margin-bottom:24px}
.ccjv1-msa-brand{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--navy);line-height:1}
.ccjv1-msa-brandsub{font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--gray);margin-top:3px}
.ccjv1-msa-ref{text-align:right}
.ccjv1-msa-kind{font-size:11px;font-weight:700;letter-spacing:1.1px;color:var(--navy)}
.ccjv1-msa-no{font-size:10.5px;color:var(--gray);margin-top:3px}
.ccjv1-msa-stamp{position:absolute;top:30px;right:40px;padding:5px 14px;border:2px solid #16a34a;border-radius:4px;color:#16a34a;font-size:12px;font-weight:800;letter-spacing:2px;transform:rotate(-7deg);opacity:.9}
.ccjv1-msa-sec{margin-bottom:26px}
.ccjv1-msa-sec-t{font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--navy);padding-bottom:7px;border-bottom:1px solid var(--border);margin-bottom:12px}
.ccjv1-msa-kv{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:5px 0;font-size:12.5px}
.ccjv1-msa-kv span{color:var(--gray);flex-shrink:0}
.ccjv1-msa-kv b{color:var(--navy);font-weight:600;text-align:right;word-break:break-word}
.ccjv1-msa-sched{margin-top:10px;padding:9px 11px;border-radius:6px;background:var(--light);font-size:11.5px;color:var(--gray);line-height:1.6}
.ccjv1-msa-cl{margin-bottom:14px}
.ccjv1-msa-cl-h{display:flex;gap:9px;font-size:12px;font-weight:700;color:var(--navy);margin-bottom:4px}
.ccjv1-msa-cl-h span{flex-shrink:0;color:var(--gray);font-weight:600;min-width:26px}
.ccjv1-msa-cl p{font-size:12px;line-height:1.75;color:#334155;margin-left:35px;font-family:Georgia,'Times New Roman',serif}
.ccjv1-msa-sigrow{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:6px}
.ccjv1-msa-sig{opacity:.55;transition:opacity .35s}
.ccjv1-msa-sig.on{opacity:1}
.ccjv1-msa-sig-for{font-size:10.5px;color:var(--gray);line-height:1.5;min-height:30px}
.ccjv1-msa-sig-mark{height:34px;font-family:'Segoe Script','Brush Script MT','Lucida Handwriting',cursive;font-size:22px;color:#1e3a5f;transform:rotate(-2deg);transform-origin:left bottom;display:flex;align-items:flex-end}
.ccjv1-msa-sig-line{border-bottom:1px solid var(--navy);margin-bottom:6px}
.ccjv1-msa-sig-name{font-size:12px;font-weight:600;color:var(--navy)}
.ccjv1-msa-sig-role{font-size:10.5px;color:var(--gray);margin-top:1px}
.ccjv1-msa-exec{margin-top:18px;padding-top:12px;border-top:1px dashed var(--border);font-size:11px;color:var(--gray);line-height:1.6}

/* A client who already has an agreement. Nothing to sign, and the stage says why. */
.ccjv1-existing{max-width:520px;margin:40px auto;background:#fff;border:1px solid var(--border);border-radius:14px;padding:32px 30px;text-align:center}
.ccjv1-existing-ico{width:52px;height:52px;margin:0 auto 16px;border-radius:14px;background:#f0fdf4;color:#15803d;display:flex;align-items:center;justify-content:center}
.ccjv1-existing-ico svg{width:24px;height:24px}
.ccjv1-existing-t{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:8px}
.ccjv1-existing-s{font-size:12.5px;color:var(--gray);line-height:1.65;margin-bottom:20px}
.ccjv1-existing-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;text-align:left}
.ccjv1-existing-grid>div{background:#fff;padding:10px 13px}
.ccjv1-existing-grid span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--gray);margin-bottom:2px}
.ccjv1-existing-grid b{font-size:12.5px;font-weight:600;color:var(--navy)}

@media(max-width:1160px){
  .ccjv1-doc{padding:26px 24px 30px}
  .ccjv1-msa-cl p{margin-left:0}
  .ccjv1-msa-sigrow{grid-template-columns:1fr;gap:16px}
}

/* ---- STAGE 6: THE DEPOSIT INVOICE ---------------------------------------------------------------
   Same desk as the agreement, and deliberately so — these are the two documents this journey puts
   in front of a client, and they should read as coming from the same company. Three bands on it:
   the money, the paper, and the ledger of what has arrived against it.

   Every figure is tabular-nums. Money in a proportional face makes two amounts of the same
   magnitude look like different lengths, and this screen exists to be compared down a column. */
.ccjv1-inv-wrap{flex:1;min-height:0;overflow-y:auto;padding:20px;background:#eef1f5;scrollbar-width:thin}
.ccjv1-inv-wrap::-webkit-scrollbar{width:6px}
.ccjv1-inv-wrap::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:99px}

/* Band 1 — what is owed. Read before anything else on the screen, so it sits above the paper. */
.ccjv1-inv-stat{max-width:720px;margin:0 auto 16px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--navy);border-radius:12px;padding:15px 18px 14px}
.ccjv1-inv-stat.ok{border-left-color:#16a34a;background:#f6fdf9}
.ccjv1-inv-stat.warn{border-left-color:#d97706;background:#fffbf3}
.ccjv1-inv-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:12px}
.ccjv1-inv-fig span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--gray);margin-bottom:3px}
.ccjv1-inv-fig b{font-size:19px;font-weight:700;color:var(--navy);letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.ccjv1-inv-fig.got b{color:#15803d}
.ccjv1-inv-fig.out b{color:#b45309}
.ccjv1-inv-bar{height:5px;border-radius:99px;background:var(--ol);overflow:hidden}
.ccjv1-inv-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#15803d,#22c55e);transition:width .5s cubic-bezier(.4,0,.2,1)}
.ccjv1-inv-when{font-size:11.5px;color:var(--gray);margin-top:9px;line-height:1.5}

/* Band 2 — the invoice. Paper, not a card: square-ish corners, a hairline border and the shadow
   of something sitting on a desk. */
.ccjv1-inv{position:relative;max-width:720px;margin:0 auto;background:#fff;border:1px solid #dbe1e8;border-radius:4px;box-shadow:0 4px 22px rgba(15,23,42,.10);padding:34px 40px 38px}
.ccjv1-inv.pending{opacity:.45}
.ccjv1-inv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-bottom:16px;border-bottom:2px solid var(--navy);margin-bottom:20px}
.ccjv1-inv-brand{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--navy);line-height:1}
.ccjv1-inv-brandsub{font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--gray);margin-top:3px}
.ccjv1-inv-ref{text-align:right}
.ccjv1-inv-kind{font-size:11px;font-weight:700;letter-spacing:1.1px;color:var(--navy)}
.ccjv1-inv-no{font-size:14px;font-weight:700;color:var(--navy);margin-top:3px;font-variant-numeric:tabular-nums}
.ccjv1-inv-stamp{position:absolute;left:8px;top:4px;padding:6px 16px;border:2.5px solid #16a34a;border-radius:4px;color:#16a34a;font-size:15px;font-weight:800;letter-spacing:3px;transform:rotate(-8deg);opacity:.9}
.ccjv1-inv-stamp.short{border-color:#d97706;color:#d97706;font-size:13px;letter-spacing:2px}

.ccjv1-inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:20px}
.ccjv1-inv-party-t{font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--gray);margin-bottom:5px}
.ccjv1-inv-party-n{font-size:13px;font-weight:700;color:var(--navy);line-height:1.35}
.ccjv1-inv-party-a{font-size:11.5px;color:#475569;line-height:1.65;margin-top:3px}
.ccjv1-inv-party-v{font-size:10.5px;color:var(--gray);line-height:1.6;margin-top:5px;font-variant-numeric:tabular-nums}

.ccjv1-inv-meta{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:20px}
.ccjv1-inv-kv{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:3px 0;font-size:11.5px}
.ccjv1-inv-kv span{color:var(--gray);flex-shrink:0}
.ccjv1-inv-kv b{color:var(--navy);font-weight:600;text-align:right;word-break:break-word;font-variant-numeric:tabular-nums}

.ccjv1-inv-lines{width:100%;border-collapse:collapse;margin-bottom:16px}
.ccjv1-inv-lines th{font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--gray);text-align:right;padding:0 0 7px;border-bottom:1px solid var(--navy);white-space:nowrap}
.ccjv1-inv-lines th:first-child{text-align:left}
.ccjv1-inv-lines td{padding:13px 0;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--navy);text-align:right;vertical-align:top;white-space:nowrap;font-variant-numeric:tabular-nums}
.ccjv1-inv-lines td:first-child{text-align:left;white-space:normal}
/* The numeric columns need real gutters between them. Without these the header reads
   "UNIT PRICE AMOUNT" as one phrase and the row prints "€ 5,700€ 5,700" as one number. */
.ccjv1-inv-lines th+th,.ccjv1-inv-lines td+td{padding-left:28px}
.ccjv1-inv-lines th:nth-child(3),.ccjv1-inv-lines td:nth-child(3),
.ccjv1-inv-lines th:nth-child(4),.ccjv1-inv-lines td:nth-child(4){min-width:92px}
.ccjv1-inv-lines td b{display:block;font-size:12.5px;font-weight:700;color:var(--navy)}
.ccjv1-inv-lines td span{display:block;font-size:11px;color:var(--gray);line-height:1.55;margin-top:3px;font-family:Georgia,'Times New Roman',serif}

.ccjv1-inv-totwrap{position:relative;display:flex;justify-content:flex-end;margin-top:2px}
.ccjv1-inv-tot{width:280px;max-width:100%}
.ccjv1-inv-trow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:5px 0;font-size:12px}
.ccjv1-inv-trow span{color:var(--gray)}
.ccjv1-inv-trow b{color:var(--navy);font-weight:600;font-variant-numeric:tabular-nums}
.ccjv1-inv-grand{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:7px;padding-top:9px;border-top:2px solid var(--navy)}
.ccjv1-inv-grand span{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--navy)}
.ccjv1-inv-grand b{font-size:18px;font-weight:800;color:var(--navy);letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.ccjv1-inv-vat{margin-top:14px;padding:9px 11px;border-radius:6px;background:var(--light);font-size:11px;color:var(--gray);line-height:1.65}

.ccjv1-inv-sec{margin-top:22px}
.ccjv1-inv-sec-t{font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--navy);padding-bottom:7px;border-bottom:1px solid var(--border);margin-bottom:9px}
.ccjv1-inv-warn{margin-top:10px;padding:9px 11px;border-radius:6px;background:#fffbeb;border:1px solid #fde68a;font-size:11px;color:#78350f;line-height:1.6}
.ccjv1-inv-foot{margin-top:20px;padding-top:13px;border-top:1px dashed var(--border);font-size:10.5px;color:var(--gray);line-height:1.7;font-family:Georgia,'Times New Roman',serif}

/* Band 3 — the ledger. A record of what happened, in the order it happened. */
.ccjv1-rem{max-width:720px;margin:16px auto 0;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px 6px}
.ccjv1-rem-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--navy);padding-bottom:11px;border-bottom:1px solid var(--border);margin-bottom:11px}
.ccjv1-rem-head span{font-size:10.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--gray);font-variant-numeric:tabular-nums}
.ccjv1-rem-row{position:relative;display:flex;align-items:flex-start;gap:12px;padding:0 0 15px 18px}
.ccjv1-rem-row:before{content:'';position:absolute;left:4px;top:11px;bottom:0;width:1.5px;background:var(--border)}
.ccjv1-rem-row:last-child:before{display:none}
.ccjv1-rem-dot{position:absolute;left:0;top:4px;width:9px;height:9px;border-radius:50%;background:var(--navy);border:1.5px solid var(--navy)}
.ccjv1-rem-row.receipt .ccjv1-rem-dot{background:#16a34a;border-color:#16a34a}
.ccjv1-rem-row.remind .ccjv1-rem-dot,.ccjv1-rem-row.chase .ccjv1-rem-dot{background:var(--card);border-color:#d97706}
.ccjv1-rem-row.release .ccjv1-rem-dot{background:#d97706;border-color:#d97706}
.ccjv1-rem-body{flex:1;min-width:0}
.ccjv1-rem-label{font-size:12.5px;font-weight:600;color:var(--navy);line-height:1.4}
.ccjv1-rem-sub{font-size:11px;color:var(--gray);margin-top:1px;line-height:1.45}
.ccjv1-rem-when{flex-shrink:0;font-size:11px;color:var(--gray);white-space:nowrap;padding-top:1px;font-variant-numeric:tabular-nums}
.ccjv1-rem-amt{flex-shrink:0;min-width:82px;text-align:right;font-size:12.5px;font-weight:700;color:#15803d;white-space:nowrap;padding-top:1px;font-variant-numeric:tabular-nums}
.ccjv1-rem-none{font-size:12px;color:#94a3b8;padding:2px 0 12px}

/* The gate lifting. It is the outcome of the stage, so it gets the weight of one. */
.ccjv1-inv-rel{max-width:720px;margin:16px auto 0;display:flex;align-items:flex-start;gap:13px;padding:15px 17px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;animation:ccjv1In .3s ease both}
.ccjv1-inv-rel.short{background:#fffbeb;border-color:#fde68a}
.ccjv1-inv-rel-ico{flex-shrink:0;width:34px;height:34px;border-radius:10px;background:#dcfce7;color:#15803d;display:flex;align-items:center;justify-content:center}
.ccjv1-inv-rel.short .ccjv1-inv-rel-ico{background:#fef3c7;color:#b45309}
.ccjv1-inv-rel-ico svg{width:17px;height:17px}
.ccjv1-inv-rel-t{font-size:13px;font-weight:700;color:#15803d}
.ccjv1-inv-rel.short .ccjv1-inv-rel-t{color:#b45309}
.ccjv1-inv-rel-s{font-size:11.5px;color:var(--gray);line-height:1.6;margin-top:3px}

.ccjv1-inv-next{max-width:720px;margin:14px auto 0;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:12px;animation:ccjv1In .3s ease both}
.ccjv1-inv-next-t{font-size:12.5px;font-weight:600;color:var(--navy)}

/* The simulate strip is the stage-3 component, reused. It only needs the desk margin here. */
.ccjv1-inv-wrap .ccjv1-sim{max-width:720px;margin:16px auto 0;background:var(--card)}

/* The remittance advice, in the client thread. */
.ccjv1-cbubble.remit{background:var(--card);border-color:var(--border);color:var(--navy)}
.ccjv1-cmsg.client .ccjv1-cbubble.remit{background:var(--card);border-color:var(--border);color:var(--navy)}
.ccjv1-remit-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--border)}
.ccjv1-remit-top b{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--gray)}
.ccjv1-remit-top span{font-size:14px;font-weight:800;color:#15803d;letter-spacing:-.3px;font-variant-numeric:tabular-nums}

@media(max-width:1160px){
  .ccjv1-inv{padding:26px 24px 30px}
  .ccjv1-inv-parties{grid-template-columns:1fr;gap:16px}
  .ccjv1-inv-meta{grid-template-columns:1fr}
  .ccjv1-inv-tot{width:100%}
  .ccjv1-inv-totwrap{padding-top:34px}
  .ccjv1-inv-stamp{top:-4px;left:2px}
  .ccjv1-rem-when{display:none}
}

/* ---- STAGE 7: THE EMPLOYMENT CONTRACT -----------------------------------------------------------
   The same paper as the agreement and the invoice, with one thing neither of those has: the
   compliance check happens ON it. Each clause takes a verdict in place, and a clause the check
   rewrote carries the rule that rewrote it directly underneath, indented under the text it
   changed. The annotation is deliberately quieter than the clause — it is apparatus around the
   document, not part of it. */
.ccjv1-ec-wrap{flex:1;min-height:0;overflow-y:auto;padding:20px;background:#eef1f5;scrollbar-width:thin}
.ccjv1-ec-wrap::-webkit-scrollbar{width:6px}
.ccjv1-ec-wrap::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:99px}

/* The band above the paper. During the check it is the progress of the check; before and after
   it is what this document is and where it stands. */
.ccjv1-ec-stat{max-width:720px;margin:0 auto 16px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--navy);border-radius:12px;padding:14px 18px}
.ccjv1-ec-stat.ok{border-left-color:#16a34a;background:#f6fdf9}
.ccjv1-ec-stat.wait{border-left-color:#d97706;background:#fffbf3}
.ccjv1-ec-stat.stop{border-left-color:#dc2626;background:#fef6f6}
.ccjv1-ec-stat.audit{border-left-color:#7c3aed;background:#faf8ff}
.ccjv1-ec-stat-t{font-size:13.5px;font-weight:700;color:var(--navy);letter-spacing:-.1px}
.ccjv1-ec-stat-s{font-size:11.5px;color:var(--gray);line-height:1.6;margin-top:4px}
.ccjv1-ec-bar{height:4px;border-radius:99px;background:var(--ol);overflow:hidden;margin:9px 0 2px}
.ccjv1-ec-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7c3aed,#a855f7);transition:width .4s cubic-bezier(.4,0,.2,1)}
.ccjv1-ec-stat.audit.ok .ccjv1-ec-bar span{background:linear-gradient(90deg,#15803d,#22c55e)}

.ccjv1-ec{position:relative;max-width:720px;margin:0 auto;background:#fff;border:1px solid #dbe1e8;border-radius:4px;box-shadow:0 4px 22px rgba(15,23,42,.10);padding:34px 40px 38px}
.ccjv1-ec.pending{opacity:.45}
.ccjv1-ec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-bottom:16px;border-bottom:2px solid var(--navy);margin-bottom:20px}
.ccjv1-ec-brand{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--navy);line-height:1}
.ccjv1-ec-brandsub{font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--gray);margin-top:3px}
.ccjv1-ec-ref{text-align:right}
.ccjv1-ec-kind{font-size:11px;font-weight:700;letter-spacing:1.1px;color:var(--navy)}
.ccjv1-ec-no{font-size:14px;font-weight:700;color:var(--navy);margin-top:3px;font-variant-numeric:tabular-nums}
.ccjv1-ec-stamp{position:absolute;bottom:30px;left:40px;padding:6px 16px;border:2.5px solid #16a34a;border-radius:4px;color:#16a34a;font-size:14px;font-weight:800;letter-spacing:3px;transform:rotate(-8deg);opacity:.9}

.ccjv1-ec-parties{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:20px}
.ccjv1-ec-party-t{font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--gray);margin-bottom:5px}
.ccjv1-ec-party-n{font-size:13px;font-weight:700;color:var(--navy);line-height:1.35}
.ccjv1-ec-party-a{font-size:11.5px;color:#475569;line-height:1.65;margin-top:3px}
.ccjv1-ec-party-v{font-size:10.5px;color:var(--gray);line-height:1.6;margin-top:5px}

.ccjv1-ec-meta{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:22px}
.ccjv1-ec-kv{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:3px 0;font-size:11.5px}
.ccjv1-ec-kv span{color:var(--gray);flex-shrink:0}
.ccjv1-ec-kv b{color:var(--navy);font-weight:600;text-align:right;word-break:break-word;font-variant-numeric:tabular-nums}

/* A clause. The left rule is what carries the verdict — colour on the margin, not on the text,
   because the text is the contract and must stay black on white. */
.ccjv1-ec-cl{position:relative;margin-bottom:16px;padding-left:13px;border-left:2px solid transparent;transition:border-color .3s,background .3s}
.ccjv1-ec-cl.pass{border-left-color:#bbf7d0}
.ccjv1-ec-cl.adjust{border-left-color:#c4b5fd}
.ccjv1-ec-cl.fail{border-left-color:#fecaca}
.ccjv1-ec-cl.na{border-left-color:var(--border)}
.ccjv1-ec-cl.live{border-left-color:#7c3aed;background:#faf8ff}
.ccjv1-ec-cl-h{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;color:var(--navy);margin-bottom:5px}
.ccjv1-ec-cl-h span{flex-shrink:0;color:var(--gray);font-weight:600;min-width:22px}
.ccjv1-ec-cl p{font-size:12px;line-height:1.75;color:#334155;font-family:Georgia,'Times New Roman',serif;margin:0}
.ccjv1-ec-cl p b{font-weight:700;color:var(--navy)}
.ccjv1-ec-mark{margin-left:auto;display:inline-flex;align-items:center;gap:5px;flex-shrink:0;padding:2px 8px;border-radius:20px;font-size:9.5px;font-weight:700;letter-spacing:.3px;font-family:var(--font,inherit)}
.ccjv1-ec-mark.pass{background:#dcfce7;color:#15803d}
.ccjv1-ec-mark.adjust{background:#ede9fe;color:#6d28d9}
.ccjv1-ec-mark.fail{background:#fee2e2;color:#b91c1c}
.ccjv1-ec-mark.na{background:var(--ol);color:var(--gray)}
.ccjv1-ec-mark.checking{background:#ede9fe;color:#6d28d9}
.ccjv1-ec-mark .ccjv1-spin.sm{border-top-color:#6d28d9}

/* The rule the clause was measured against. Sans-serif and small on purpose — this is apparatus
   around the contract, and must never be mistaken for a term of it. */
.ccjv1-ec-rule{margin-top:8px;padding:9px 11px;border-radius:7px;background:var(--light);border:1px solid var(--border)}
.ccjv1-ec-rule.adjust{background:#faf8ff;border-color:#ddd6fe}
.ccjv1-ec-rule.fail{background:#fef2f2;border-color:#fecaca}
.ccjv1-ec-rule-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:10.5px;font-weight:700;color:var(--navy);margin-bottom:6px}
.ccjv1-ec-rule-h i{font-style:normal;font-weight:600;font-size:9.5px;color:var(--gray);flex-shrink:0}
.ccjv1-ec-rule-cmp{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:10.5px;padding:1px 0}
.ccjv1-ec-rule-cmp span{color:var(--gray);flex-shrink:0}
.ccjv1-ec-rule-cmp b{color:var(--navy);font-weight:600;text-align:right}
.ccjv1-ec-rule-n{font-size:10.5px;color:var(--gray);line-height:1.6;margin-top:5px;padding-top:5px;border-top:1px dashed var(--border)}
.ccjv1-ec-rule.adjust .ccjv1-ec-rule-n{color:#6d28d9;font-weight:600}
.ccjv1-ec-rule.fail .ccjv1-ec-rule-n{color:#b91c1c;font-weight:600}

.ccjv1-ec-sec{margin-top:26px}
.ccjv1-ec-sec-t{font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--navy);padding-bottom:7px;border-bottom:1px solid var(--border);margin-bottom:12px}
.ccjv1-ec-sigrow{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:6px}
.ccjv1-ec-exec{margin-top:18px;padding-top:12px;border-top:1px dashed var(--border);font-size:11px;color:var(--gray);line-height:1.6}
.ccjv1-ec-exec.stamped{padding-left:160px;min-height:46px;display:flex;align-items:center}

/* The e-signature audit trail. A signature is worth what the record behind it says. */
.ccjv1-env{max-width:720px;margin:16px auto 0;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px 6px}
.ccjv1-env-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--navy);padding-bottom:11px;border-bottom:1px solid var(--border);margin-bottom:11px}
.ccjv1-env-head span{font-size:10.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--gray)}
.ccjv1-env-row{position:relative;display:flex;align-items:flex-start;gap:12px;padding:0 0 15px 18px;opacity:.45;transition:opacity .3s}
.ccjv1-env-row.done{opacity:1}
.ccjv1-env-row:before{content:'';position:absolute;left:4px;top:11px;bottom:0;width:1.5px;background:var(--border)}
.ccjv1-env-row:last-child:before{display:none}
.ccjv1-env-dot{position:absolute;left:0;top:4px;width:9px;height:9px;border-radius:50%;background:var(--card);border:1.5px solid var(--border)}
.ccjv1-env-row.done .ccjv1-env-dot{background:#16a34a;border-color:#16a34a}
.ccjv1-env-body{flex:1;min-width:0}
.ccjv1-env-label{font-size:12.5px;font-weight:600;color:var(--navy);line-height:1.4}
.ccjv1-env-sub{font-size:11px;color:var(--gray);margin-top:1px;line-height:1.45;word-break:break-word}
.ccjv1-env-when{flex-shrink:0;font-size:11px;color:var(--gray);white-space:nowrap;padding-top:1px;font-variant-numeric:tabular-nums}

.ccjv1-ec-next{max-width:720px;margin:14px auto 0;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;animation:ccjv1In .3s ease both}
.ccjv1-ec-next-t{font-size:12.5px;font-weight:600;color:#15803d}
.ccjv1-ec-wrap .ccjv1-sim{max-width:720px;margin:16px auto 0;background:var(--card)}

/* The employee is a different counterparty to the client, and the avatar says so. */
.ccjv1-chat-av.worker{background:#ede9fe;color:#6d28d9}

@media(max-width:1160px){
  .ccjv1-ec{padding:26px 24px 30px}
  .ccjv1-ec-parties{grid-template-columns:1fr;gap:16px}
  .ccjv1-ec-meta{grid-template-columns:1fr}
  .ccjv1-ec-sigrow{grid-template-columns:1fr;gap:16px}
  .ccjv1-ec-stamp{left:24px;bottom:20px}
  .ccjv1-env-when{display:none}
}

/* ---- STAGE 8: ONBOARDING ------------------------------------------------------------------------
   Not a document — a file being assembled. Six cards, and the state of each is carried by the
   card's own weight: the running one is open and outlined, the finished ones collapse to the
   thing they produced, the ones ahead sit quiet with what they will need. */
.ccjv1-onb-wrap{flex:1;min-height:0;overflow-y:auto;padding:20px;background:#eef1f5;scrollbar-width:thin}
.ccjv1-onb-wrap::-webkit-scrollbar{width:6px}
.ccjv1-onb-wrap::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:99px}

.ccjv1-onb-hero{max-width:760px;margin:0 auto 16px;display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--navy);border-radius:12px;padding:14px 18px}
.ccjv1-onb-hero.ok{border-left-color:#16a34a;background:#f6fdf9}
.ccjv1-onb-hero-av{flex-shrink:0;width:40px;height:40px;border-radius:12px;background:#ede9fe;color:#6d28d9;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.ccjv1-onb-hero-body{flex:1;min-width:0}
.ccjv1-onb-hero-t{font-size:15px;font-weight:700;color:var(--navy);letter-spacing:-.2px}
.ccjv1-onb-hero-s{font-size:11.5px;color:var(--gray);margin-top:2px}
.ccjv1-onb-hero-fig{flex-shrink:0;text-align:right}
.ccjv1-onb-hero-fig span{display:block;font-size:17px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.ccjv1-onb-hero-fig i{display:block;font-style:normal;font-size:10px;color:var(--gray);margin-top:1px}

.ccjv1-onb-card{max-width:760px;margin:0 auto 12px;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:box-shadow .25s,border-color .25s}
.ccjv1-onb-card.live{border-color:#c4b5fd;box-shadow:0 4px 20px rgba(109,40,217,.10)}
.ccjv1-onb-card.pending{opacity:.62}
.ccjv1-onb-card-h{display:flex;align-items:center;gap:11px;padding:13px 16px}
.ccjv1-onb-card.live .ccjv1-onb-card-h,.ccjv1-onb-card.done .ccjv1-onb-card-h{padding-bottom:11px}
.ccjv1-onb-card-n{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ol);color:var(--gray);font-size:11px;font-weight:700}
.ccjv1-onb-card.done .ccjv1-onb-card-n{background:#dcfce7;color:#16a34a}
.ccjv1-onb-card.done .ccjv1-onb-card-n svg{width:12px;height:12px}
.ccjv1-onb-card.live .ccjv1-onb-card-n{background:#ede9fe;color:#6d28d9}
.ccjv1-onb-card.live .ccjv1-onb-card-n .ccjv1-spin{border-top-color:#6d28d9}
.ccjv1-onb-card-t{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--navy)}
.ccjv1-onb-card-t span{display:block;font-size:11px;font-weight:500;color:var(--gray);margin-top:2px;line-height:1.5}
.ccjv1-onb-card-b{padding:0 16px 15px;border-top:1px solid var(--border);margin-top:2px;padding-top:14px}

/* ---- THE KYC CONSOLE ---------------------------------------------------------------------------
   Eight phases, revealed in order. The two-column comparison is the heart of it: what the
   document says on the left, what we already believed on the right, and a verdict per row. */
.ccjv1-kyc-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.ccjv1-kyc-prov{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#6d28d9}
.ccjv1-kyc-sid{font-size:11px;color:var(--gray);font-variant-numeric:tabular-nums}
.ccjv1-kyc-ph{position:relative;padding:0 0 13px 20px;border-left:1.5px solid var(--border);margin-left:5px}
.ccjv1-kyc-ph:last-child{border-left-color:transparent}
.ccjv1-kyc-ph-h{display:flex;align-items:flex-start;gap:9px}
.ccjv1-kyc-ph-ico{position:absolute;left:-9px;top:0;width:17px;height:17px;border-radius:50%;background:var(--card);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--gray)}
.ccjv1-kyc-ph.done .ccjv1-kyc-ph-ico{background:#dcfce7;border-color:#bbf7d0;color:#16a34a}
.ccjv1-kyc-ph-ico svg{width:9px;height:9px}
.ccjv1-kyc-ph-t{font-size:12px;font-weight:600;color:var(--navy);line-height:1.35}
.ccjv1-kyc-ph-t i{display:block;font-style:normal;font-size:10.5px;font-weight:400;color:var(--gray);margin-top:1px}
/* NOT animated. The screen repaints on every beat of the check, which restarts any animation
   on a repainted node — so an entry fade never completed and every revealed section sat
   frozen part-way through it, permanently pale, for the whole time anyone was watching. */
.ccjv1-kyc-ph-b{margin-top:9px}

.ccjv1-kyc-rows{border:1px solid var(--border);border-radius:8px;overflow:hidden}
.ccjv1-kyc-row,.ccjv1-kyc-cmp{display:flex;align-items:center;gap:10px;padding:7px 10px;border-bottom:1px solid var(--border);font-size:11px}
.ccjv1-kyc-row:last-child,.ccjv1-kyc-cmp:last-child{border-bottom:none}
.ccjv1-kyc-k{flex:0 0 118px;color:var(--gray)}
.ccjv1-kyc-v{flex:1;min-width:0;color:var(--navy);font-weight:500;word-break:break-word}
.ccjv1-kyc-doc-v{flex:0 0 34%;color:var(--navy);font-weight:700;font-variant-numeric:tabular-nums;word-break:break-word}
.ccjv1-kyc-cmp-h{display:flex;gap:10px;padding:0 10px 5px;font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--gray)}
.ccjv1-kyc-cmp-h span:first-child{flex:0 0 128px}
.ccjv1-kyc-cmp-h span:nth-child(2){flex:1}
.ccjv1-kyc-cmp-h i{flex:0 0 18px}
.ccjv1-kyc-vd{flex:0 0 16px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800}
.ccjv1-kyc-vd.pass{background:#dcfce7;color:#16a34a}
.ccjv1-kyc-vd.consider{background:#fef3c7;color:#b45309}
.ccjv1-kyc-vd.fail{background:#fee2e2;color:#b91c1c}
.ccjv1-kyc-vd.na{background:var(--ol);color:var(--gray)}

/* The document, rendered as one. A row of extracted text does not tell a reviewer that a
   passport was actually photographed. */
.ccjv1-kyc-doc-card{background:linear-gradient(135deg,#1e293b,#334155);border-radius:9px;padding:11px 13px;color:#e2e8f0;max-width:400px}
.ccjv1-kyc-doc-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:9px}
.ccjv1-kyc-doc-top span{font-size:9px;letter-spacing:.5px;text-transform:uppercase;color:#94a3b8}
.ccjv1-kyc-doc-top b{font-size:10px;font-weight:700;letter-spacing:1.4px;color:#e2e8f0}
.ccjv1-kyc-doc-mid{display:flex;gap:12px}
/* 46x58 is the 35x45mm passport ratio. The portrait, when one is configured, sits OVER the drawn
   placeholder — so a missing file uncovers the fallback instead of leaving a hole. */
.ccjv1-kyc-doc-photo{position:relative;overflow:hidden;flex-shrink:0;width:46px;height:58px;border-radius:5px;background:rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;color:#94a3b8}
.ccjv1-kyc-doc-photo svg{width:26px;height:26px}
/* `50% 22%`, not centre: a head sits high in a passport photo, and cropping to the middle of the
   frame centres the chest. Desaturated a touch on the document card because it is printed on a
   page, not displayed — the live capture beside it stays full colour, and the difference between
   the two is what makes the face match read as a comparison of two sources. */
.ccjv1-kyc-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;z-index:1}
.ccjv1-kyc-doc-card .ccjv1-kyc-portrait{filter:grayscale(.3) contrast(1.06) brightness(.98)}
.ccjv1-kyc-doc-photo:has(.ccjv1-kyc-portrait){box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.ccjv1-kyc-doc-fields{flex:1;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 12px}
.ccjv1-kyc-doc-fields span{display:block;font-size:8px;letter-spacing:.4px;text-transform:uppercase;color:#94a3b8}
.ccjv1-kyc-doc-fields b{display:block;font-size:11px;font-weight:600;color:#f1f5f9;word-break:break-word}
.ccjv1-kyc-mrz{margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.14);font-family:'SF Mono',Menlo,Consolas,monospace;font-size:9px;letter-spacing:.6px;color:#94a3b8;word-break:break-all}
.ccjv1-kyc-doc-note{font-size:10.5px;color:var(--gray);margin-top:7px}

/* The permit, captured in the same session. Quieter than the passport card because it is
   supporting evidence rather than the identity itself, but it carries the four things the
   right-to-work verdict actually rests on. */
.ccjv1-kyc-permit{margin-top:10px;border:1px solid #bbf7d0;border-radius:8px;background:#f6fdf9;padding:9px 11px}
.ccjv1-kyc-permit-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:7px;margin-bottom:7px;border-bottom:1px solid #bbf7d0}
.ccjv1-kyc-permit-h b{font-size:11.5px;font-weight:700;color:#15803d}
.ccjv1-kyc-permit-h span{font-size:10.5px;color:var(--gray);font-variant-numeric:tabular-nums;white-space:nowrap}
.ccjv1-kyc-permit-g{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.ccjv1-kyc-permit-g span{display:block;font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--gray)}
.ccjv1-kyc-permit-g b{display:block;font-size:10.5px;font-weight:600;color:var(--navy);margin-top:1px;line-height:1.4}

.ccjv1-kyc-faces{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.ccjv1-kyc-face{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:4px;width:58px;height:66px;border-radius:8px;border:1.5px solid var(--border);background:var(--light);color:var(--gray);justify-content:center}
.ccjv1-kyc-face.live{border-color:#bbf7d0;background:#f0fdf4;color:#16a34a}
.ccjv1-kyc-face svg{width:22px;height:22px}
.ccjv1-kyc-face i{font-style:normal;font-size:8.5px;letter-spacing:.2px}
/* With a photo behind it the caption needs its own ground, or white-on-light is unreadable. It
   becomes a strip at the foot of the frame rather than a line floating in the middle of a face. */
.ccjv1-kyc-face:has(.ccjv1-kyc-portrait){gap:0}
.ccjv1-kyc-face:has(.ccjv1-kyc-portrait) i{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:3px 0 2px;text-align:center;color:#fff;background:linear-gradient(transparent,rgba(15,23,42,.72) 42%)}
.ccjv1-kyc-face .ccjv1-kyc-portrait{filter:grayscale(.3) contrast(1.06)}
.ccjv1-kyc-face.live .ccjv1-kyc-portrait{filter:none}
.ccjv1-kyc-link{font-size:17px;color:#16a34a}

.ccjv1-kyc-rtw{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:8px;background:#f0fdf4;border:1px solid #bbf7d0}
.ccjv1-kyc-rtw.consider{background:#fffbeb;border-color:#fde68a}
.ccjv1-kyc-rtw b{display:block;font-size:11.5px;font-weight:700;color:var(--navy);line-height:1.4}
.ccjv1-kyc-rtw span{display:block;font-size:10.5px;color:var(--gray);line-height:1.55;margin-top:2px}

.ccjv1-kyc-dec{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:10px;background:#f0fdf4;border:1px solid #bbf7d0}
.ccjv1-kyc-dec.consider{background:#fffbeb;border-color:#fde68a}
.ccjv1-kyc-dec.reject{background:#fef2f2;border-color:#fecaca}
.ccjv1-kyc-score{flex-shrink:0;text-align:center;padding-right:14px;border-right:1px solid rgba(0,0,0,.09)}
.ccjv1-kyc-score span{display:block;font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--gray)}
.ccjv1-kyc-score b{font-size:22px;font-weight:800;color:var(--navy);letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.ccjv1-kyc-score i{font-style:normal;font-size:10px;color:var(--gray)}
.ccjv1-kyc-dec-t{font-size:13px;font-weight:800;letter-spacing:1px;color:#15803d}
.ccjv1-kyc-dec.consider .ccjv1-kyc-dec-t{color:#b45309}
.ccjv1-kyc-dec.reject .ccjv1-kyc-dec-t{color:#b91c1c}
.ccjv1-kyc-dec-s{font-size:11px;color:var(--gray);line-height:1.55;margin-top:3px}
.ccjv1-onb-card-b .ccjv1-sim{margin-top:12px}

/* ---- DOCUMENTS ---------------------------------------------------------------------------------- */
.ccjv1-chk-h,.ccjv1-file-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--navy);margin-bottom:10px}
.ccjv1-chk-h span,.ccjv1-file-h span{font-size:10.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--gray)}
.ccjv1-chk{border:1px solid var(--border);border-radius:9px;overflow:hidden}
.ccjv1-chk-row{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border-bottom:1px solid var(--border)}
.ccjv1-chk-row:last-child{border-bottom:none}
.ccjv1-chk-row.waiting{opacity:.5}
.ccjv1-chk-row.rejected{background:#fef6f6}
.ccjv1-chk-st{flex-shrink:0;width:16px;height:16px;margin-top:1px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;background:var(--ol);color:var(--gray)}
.ccjv1-chk-row.verified .ccjv1-chk-st{background:#dcfce7;color:#16a34a}
.ccjv1-chk-row.rejected .ccjv1-chk-st{background:#fee2e2;color:#b91c1c}
.ccjv1-chk-b{flex:1;min-width:0}
.ccjv1-chk-l{font-size:11.5px;font-weight:600;color:var(--navy);line-height:1.4}
.ccjv1-chk-opt{margin-left:7px;padding:1px 5px;border-radius:4px;background:var(--ol);font-size:8.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--gray)}
.ccjv1-chk-w{font-size:10.5px;color:var(--gray);line-height:1.5;margin-top:1px}
.ccjv1-chk-n{font-size:10.5px;color:#b91c1c;line-height:1.5;margin-top:3px;font-weight:600}
.ccjv1-chk-row.verified .ccjv1-chk-n{color:#15803d}
.ccjv1-chk-r{flex-shrink:0;font-size:10.5px;color:var(--gray);font-variant-numeric:tabular-nums;padding-top:1px}

/* ---- FILINGS, BANK, PAYSLIP ---------------------------------------------------------------------- */
.ccjv1-env.plain{margin:0;border:none;border-radius:0;padding:0;background:transparent}
.ccjv1-file-out,.ccjv1-bank{border:1px solid var(--border);border-radius:9px;overflow:hidden;margin-top:9px}
.ccjv1-file-kv{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 11px;border-bottom:1px solid var(--border);font-size:11px}
.ccjv1-file-kv:last-child{border-bottom:none}
.ccjv1-file-kv span{color:var(--gray);flex-shrink:0}
.ccjv1-file-kv b{color:var(--navy);font-weight:600;text-align:right;word-break:break-word;font-variant-numeric:tabular-nums}
.ccjv1-bank-n{font-size:10.5px;color:var(--gray);line-height:1.6;margin-top:9px}

.ccjv1-slip{margin-top:11px;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.ccjv1-slip-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 11px;background:var(--light);border-bottom:1px solid var(--border);font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--navy)}
.ccjv1-slip-h span{font-size:10.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--gray)}
.ccjv1-slip-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:8px 11px;border-bottom:1px solid var(--border)}
.ccjv1-slip-row:last-child{border-bottom:none}
.ccjv1-slip-row.total{background:#f6fdf9}
.ccjv1-slip-k{font-size:11.5px;font-weight:600;color:var(--navy)}
.ccjv1-slip-k span{display:block;font-size:10px;font-weight:400;color:var(--gray);margin-top:1px}
.ccjv1-slip-v{font-size:12.5px;font-weight:600;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums}
.ccjv1-slip-row.total .ccjv1-slip-v{font-size:14px;font-weight:800;color:#15803d}

.ccjv1-onb-next{max-width:760px;margin:14px auto 0;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;animation:ccjv1In .3s ease both}
.ccjv1-onb-next-t{font-size:12.5px;font-weight:600;color:#15803d}

/* A document we could not accept, in the employee's thread. */
.ccjv1-cbubble.reject{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}

/* THE DOCUMENT PHOTOGRAPH, as the employee sends it. Padding comes off the bubble so the picture
   goes edge to edge — an attachment in a thread is the picture, with the caption under it, not a
   picture inset inside a message. `aspect-ratio` holds the frame before the image decodes, so the
   thread does not jump when it lands. */
.ccjv1-cbubble.scan{padding:0;overflow:hidden;max-width:250px}
.ccjv1-scan-shot{position:relative;aspect-ratio:3/2;background:#e8edf3;display:flex;align-items:center;justify-content:center;color:#94a3b8}
.ccjv1-scan-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
.ccjv1-scan-ph svg{width:34px;height:34px}
.ccjv1-scan-cap{padding:7px 10px 8px;font-size:10.5px;color:var(--gray);line-height:1.45;background:var(--card)}
/* The worker's own bubbles are tinted; the caption strip has to sit on the same ground or the
   attachment reads as two stacked messages rather than one. */
.ccjv1-cmsg.client .ccjv1-cbubble.scan{background:var(--card);border-color:var(--border)}

@media(max-width:1160px){
  .ccjv1-kyc-k{flex:0 0 92px}
  .ccjv1-kyc-doc-v{flex:0 0 30%}
  .ccjv1-kyc-doc-fields{grid-template-columns:1fr}
}

/* ---- STAGE 9: ACTIVE ----------------------------------------------------------------------------
   Three screens on the same desk as the invoice and the contract, because two of the three ARE
   documents — a certificate and a payslip — and the third is the record they produced.

   All three scroll in their own column, like every other screen in this journey. The certificate
   and the payslip are white paper on the grey desk; the register between them is a stack of cards,
   because a payroll run is not one document, it is a working file that becomes one.

   Nothing on these screens carries `animation:ccjv1In`. Both tickers repaint the whole screen on
   every beat, and a repaint restarts an animation — so an entry fade would never finish and the
   content would sit permanently pale. Same rule the KYC console learnt. */
.ccjv1-rdy-wrap,.ccjv1-pr-wrap,.ccjv1-act-wrap{flex:1;min-height:0;overflow-y:auto;padding:20px;background:#eef1f5;scrollbar-width:thin}
.ccjv1-rdy-wrap::-webkit-scrollbar,.ccjv1-pr-wrap::-webkit-scrollbar,.ccjv1-act-wrap::-webkit-scrollbar{width:6px}
.ccjv1-rdy-wrap::-webkit-scrollbar-thumb,.ccjv1-pr-wrap::-webkit-scrollbar-thumb,.ccjv1-act-wrap::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:99px}

/* -- The certificate. Paper, and it earns the stamp only once every control has been derived. -- */
.ccjv1-rdy-cert{position:relative;max-width:760px;margin:0 auto;background:#fff;border:1px solid #dbe1e8;border-radius:4px;box-shadow:0 4px 22px rgba(15,23,42,.10);padding:30px 34px 34px}
.ccjv1-rdy-cert.ok{border-color:#bbf7d0}
.ccjv1-rdy-cert.bad{border-color:#fecaca}
/* In the flow, not over it. See the note in buildCCJV1RdyHTML: floated over the header it landed on
   the worker's own details and across the rule under them. */
.ccjv1-rdy-stamp{display:inline-block;margin-top:11px;padding:5px 13px;border:2.5px solid #16a34a;border-radius:4px;color:#16a34a;font-size:11.5px;font-weight:800;letter-spacing:2.2px;transform:rotate(-4deg);transform-origin:left center;opacity:.92;white-space:nowrap}
.ccjv1-rdy-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-bottom:15px;border-bottom:2px solid var(--navy);margin-bottom:15px}
.ccjv1-rdy-kind{font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--navy)}
.ccjv1-rdy-no{font-size:14px;font-weight:700;color:var(--navy);margin-top:3px;font-variant-numeric:tabular-nums}
.ccjv1-rdy-who{text-align:right;min-width:0}
.ccjv1-rdy-who b{display:block;font-size:14px;font-weight:700;color:var(--navy);letter-spacing:-.2px}
.ccjv1-rdy-who span{display:block;font-size:11px;color:var(--gray);line-height:1.6;margin-top:1px}
.ccjv1-rdy-bar{height:4px;border-radius:99px;background:var(--ol);overflow:hidden}
.ccjv1-rdy-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#15803d,#22c55e);transition:width .4s cubic-bezier(.4,0,.2,1)}
.ccjv1-rdy-count{font-size:11px;color:var(--gray);margin:8px 0 18px}
.ccjv1-rdy-count b{color:var(--navy);font-weight:700;font-variant-numeric:tabular-nums}

.ccjv1-rdy-grp{margin-bottom:16px}
.ccjv1-rdy-grp-h{display:flex;align-items:flex-start;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:2px}
.ccjv1-rdy-grp-n{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.ccjv1-rdy-grp-t{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--navy)}
.ccjv1-rdy-grp-t i{display:block;font-style:normal;font-size:10.5px;font-weight:400;color:var(--gray);line-height:1.55;margin-top:2px}

.ccjv1-rdy-row{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--border)}
.ccjv1-rdy-row:last-child{border-bottom:none}
.ccjv1-rdy-v{flex:0 0 17px;width:17px;height:17px;margin-top:1px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800}
.ccjv1-rdy-v.pass{background:#dcfce7;color:#16a34a}
.ccjv1-rdy-v.consider{background:#fef3c7;color:#b45309}
.ccjv1-rdy-v.fail{background:#fee2e2;color:#b91c1c}
.ccjv1-rdy-v.na{background:var(--ol);color:var(--gray)}
.ccjv1-rdy-b{flex:1;min-width:0}
.ccjv1-rdy-l{font-size:12.5px;font-weight:700;color:var(--navy);line-height:1.4}
.ccjv1-rdy-row.fail .ccjv1-rdy-l{color:#b91c1c}
/* What the control PROVES, in the serif the documents in this journey use for their own voice —
   it is the certificate speaking, not the interface labelling a field. */
.ccjv1-rdy-p{font-size:11px;color:#475569;line-height:1.6;margin-top:2px;font-family:Georgia,'Times New Roman',serif}
.ccjv1-rdy-d{font-size:11px;color:var(--gray);line-height:1.6;margin-top:4px}
.ccjv1-rdy-src{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:6px;font-size:10px}
.ccjv1-rdy-src span{padding:2px 7px;border-radius:4px;background:var(--light);color:var(--gray);font-weight:600;letter-spacing:.2px}
.ccjv1-rdy-src b{color:var(--navy);font-weight:700;font-variant-numeric:tabular-nums;word-break:break-word}
.ccjv1-rdy-src i{font-style:normal;color:#94a3b8;font-variant-numeric:tabular-nums}
.ccjv1-rdy-foot{margin-top:18px;padding:12px 14px;border-radius:8px;background:#f0fdf4;border:1px solid #bbf7d0;font-size:11.5px;color:#14532d;line-height:1.7}
.ccjv1-rdy-foot b{font-weight:700}
.ccjv1-rdy-foot.bad{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}

/* -- The register. Cards, because the run is assembled rather than issued. -- */
.ccjv1-pr-hero{max-width:760px;margin:0 auto 14px;display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--navy);border-radius:12px;padding:14px 18px}
.ccjv1-pr-hero.ok{border-left-color:#16a34a;background:#f6fdf9}
.ccjv1-pr-hero.held{border-left-color:#d97706;background:#fffbf3}
.ccjv1-pr-hero-b{flex:1;min-width:0}
.ccjv1-pr-hero-t{font-size:15px;font-weight:700;color:var(--navy);letter-spacing:-.2px;font-variant-numeric:tabular-nums}
.ccjv1-pr-hero-s{font-size:11.5px;color:var(--gray);margin-top:2px}
.ccjv1-pr-hero-f{flex-shrink:0;text-align:right}
.ccjv1-pr-hero-f span{display:block;font-size:19px;font-weight:800;color:var(--navy);letter-spacing:-.4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ccjv1-pr-hero.ok .ccjv1-pr-hero-f span{color:#15803d}
.ccjv1-pr-hero-f i{display:block;font-style:normal;font-size:10px;color:var(--gray);margin-top:1px}

.ccjv1-pr-card{max-width:760px;margin:0 auto 12px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px 15px}
.ccjv1-pr-card-t{font-size:10px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--navy);padding-bottom:9px;border-bottom:1px solid var(--border);margin-bottom:11px}

.ccjv1-pr-ph{position:relative;display:flex;align-items:flex-start;gap:9px;padding:0 0 11px 20px;border-left:1.5px solid var(--border);margin-left:5px}
.ccjv1-pr-ph:last-child{border-left-color:transparent;padding-bottom:0}
.ccjv1-pr-ph-i{position:absolute;left:-9px;top:0;width:17px;height:17px;border-radius:50%;background:var(--card);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--gray)}
.ccjv1-pr-ph.done .ccjv1-pr-ph-i{background:#dcfce7;border-color:#bbf7d0;color:#16a34a}
.ccjv1-pr-ph-i svg{width:9px;height:9px}
.ccjv1-pr-ph-t{font-size:12px;font-weight:600;color:var(--navy);line-height:1.35}
.ccjv1-pr-ph-t i{display:block;font-style:normal;font-size:10.5px;font-weight:400;color:var(--gray);margin-top:1px}

.ccjv1-pr-kvs{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.ccjv1-pr-kv{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--border);font-size:11.5px}
.ccjv1-pr-kv span{color:var(--gray);flex-shrink:0}
.ccjv1-pr-kv b{color:var(--navy);font-weight:600;text-align:right;word-break:break-word;font-variant-numeric:tabular-nums}

/* Money is compared down a column here more than anywhere else in the journey, so every numeric
   cell is tabular and the amount column is pinned right with a real gutter in front of it. */
.ccjv1-pr-tbl{width:100%;border-collapse:collapse;margin-bottom:12px}
.ccjv1-pr-tbl:last-child{margin-bottom:0}
.ccjv1-pr-tbl th{font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--gray);text-align:right;padding:0 0 7px;border-bottom:1px solid var(--navy);white-space:nowrap}
.ccjv1-pr-tbl th:first-child{text-align:left}
.ccjv1-pr-tbl td{padding:10px 0;border-bottom:1px solid var(--border);font-size:12px;color:var(--navy);text-align:right;vertical-align:top;white-space:nowrap;font-variant-numeric:tabular-nums}
.ccjv1-pr-tbl td:first-child{text-align:left;white-space:normal}
.ccjv1-pr-tbl th+th,.ccjv1-pr-tbl td+td{padding-left:26px}
.ccjv1-pr-tbl th:last-child,.ccjv1-pr-tbl td:last-child{min-width:104px}
.ccjv1-pr-tbl td b{display:block;font-size:12px;font-weight:700;color:var(--navy)}
.ccjv1-pr-tbl td span{display:block;font-size:10.5px;font-weight:400;color:var(--gray);line-height:1.55;margin-top:2px}
.ccjv1-pr-neg{color:#b45309}
.ccjv1-pr-sum td{border-top:1.5px solid var(--navy);border-bottom:none;font-weight:700}
.ccjv1-pr-sum.net td{color:#15803d}
.ccjv1-pr-sum.net td b{color:#15803d;font-size:13.5px}

.ccjv1-pr-rec{margin:2px 0 12px;padding:9px 11px;border-radius:7px;background:#fffbeb;border:1px solid #fde68a;font-size:11px;color:#78350f;line-height:1.65}
.ccjv1-pr-rec.ok{background:var(--light);border-color:var(--border);color:var(--gray)}
.ccjv1-pr-rec b{font-weight:700;font-variant-numeric:tabular-nums}

.ccjv1-pr-stat{border:1px solid var(--border);border-radius:9px;overflow:hidden}
.ccjv1-pr-stat-r{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border-bottom:1px solid var(--border)}
.ccjv1-pr-stat-r:last-child{border-bottom:none}
.ccjv1-pr-stat-r b{display:block;font-size:12px;font-weight:700;color:var(--navy)}
.ccjv1-pr-stat-r span{display:block;font-size:10.5px;color:var(--gray);line-height:1.5;margin-top:1px}
.ccjv1-pr-stat-v{flex-shrink:0;text-align:right;font-size:13px;font-weight:700;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums}
.ccjv1-pr-stat-v i{display:block;font-style:normal;font-size:10px;font-weight:500;color:var(--gray);margin-top:1px}
.ccjv1-pr-note{font-size:10.5px;color:var(--gray);line-height:1.65;margin-top:10px}

.ccjv1-pr-ctrl{border:1px solid var(--border);border-radius:9px;overflow:hidden}
.ccjv1-pr-ctrl-r{display:flex;align-items:center;gap:10px;padding:9px 11px;border-bottom:1px solid var(--border);font-size:11.5px}
.ccjv1-pr-ctrl-r:last-child{border-bottom:none}
.ccjv1-pr-ctrl-r.no{background:#fef6f6}
.ccjv1-pr-ctrl-l{flex:1;min-width:0;color:var(--navy)}
.ccjv1-pr-ctrl-r b{flex-shrink:0;color:var(--navy);font-weight:700;font-variant-numeric:tabular-nums;text-align:right}

/* The release. It is the only moment in the journey where money leaves us for a person, so it
   gets the weight the countersignature and the deposit release get. */
.ccjv1-pr-rel{max-width:760px;margin:0 auto 12px;display:flex;align-items:flex-start;gap:13px;padding:14px 16px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px}
.ccjv1-pr-rel.held{background:#fffbeb;border-color:#fde68a}
.ccjv1-pr-rel-i{flex-shrink:0;width:32px;height:32px;border-radius:10px;background:#dcfce7;color:#15803d;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800}
.ccjv1-pr-rel.held .ccjv1-pr-rel-i{background:#fef3c7;color:#b45309}
.ccjv1-pr-rel-i svg{width:16px;height:16px}
.ccjv1-pr-rel-t{font-size:12.5px;font-weight:700;color:#15803d}
.ccjv1-pr-rel.held .ccjv1-pr-rel-t{color:#b45309}
.ccjv1-pr-rel-s{font-size:11px;color:var(--gray);line-height:1.6;margin-top:2px}
.ccjv1-pr-next{max-width:760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:12px}
.ccjv1-pr-next-t{font-size:12.5px;font-weight:600;color:var(--navy)}

/* -- The payslip. `ccjv1-ps-*`: `.ccjv1-slip` belongs to stage 8's indicative one. -- */
.ccjv1-ps{max-width:760px;margin:0 auto 12px;background:#fff;border:1px solid #dbe1e8;border-radius:4px;box-shadow:0 4px 22px rgba(15,23,42,.10);padding:26px 30px 28px}
.ccjv1-ps-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-bottom:14px;border-bottom:2px solid var(--navy);margin-bottom:14px}
.ccjv1-ps-brand{font-size:15px;font-weight:800;color:var(--navy);letter-spacing:-.3px;line-height:1.3}
.ccjv1-ps-addr{font-size:10.5px;color:var(--gray);margin-top:3px}
.ccjv1-ps-ref{text-align:right;flex-shrink:0}
.ccjv1-ps-kind{font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--navy)}
.ccjv1-ps-no{font-size:13px;font-weight:700;color:var(--navy);margin-top:2px;font-variant-numeric:tabular-nums}
.ccjv1-ps-per{font-size:11px;color:var(--gray);margin-top:1px}
.ccjv1-ps-emp{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 20px;padding-bottom:15px;border-bottom:1px solid var(--border);margin-bottom:4px}
.ccjv1-ps-emp span{display:block;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--gray)}
.ccjv1-ps-emp b{display:block;font-size:11.5px;font-weight:600;color:var(--navy);margin-top:2px;word-break:break-word;font-variant-numeric:tabular-nums}
.ccjv1-ps-sec{font-size:9px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--gray);margin-top:14px;padding-bottom:5px;border-bottom:1px solid var(--border)}
.ccjv1-ps-l{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px solid var(--border)}
.ccjv1-ps-l b{display:block;font-size:12px;font-weight:600;color:var(--navy)}
.ccjv1-ps-l span{display:block;font-size:10.5px;color:var(--gray);line-height:1.5;margin-top:2px}
.ccjv1-ps-l i{flex-shrink:0;font-style:normal;font-size:12.5px;font-weight:600;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums}
.ccjv1-ps-l.sum{border-top:1.5px solid var(--navy);border-bottom:none}
.ccjv1-ps-l.sum i{font-weight:800}
.ccjv1-ps-l.net{border-top:1.5px solid var(--navy);border-bottom:none;margin-top:2px;padding-top:11px}
.ccjv1-ps-l.net b{font-size:13px;font-weight:800}
.ccjv1-ps-l.net i{font-size:17px;font-weight:800;color:#15803d;letter-spacing:-.3px}
.ccjv1-ps-foot{margin-top:16px;padding-top:12px;border-top:1px dashed var(--border);font-size:10.5px;color:var(--gray);line-height:1.75;font-family:Georgia,'Times New Roman',serif}

/* -- The record. The end of the journey, and the only screen that looks back across all nine. -- */
.ccjv1-act-hero{max-width:760px;margin:0 auto 14px;display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--navy);border-radius:12px;padding:15px 18px}
.ccjv1-act-hero.ok{border-left-color:#16a34a;background:#f6fdf9}
.ccjv1-act-hero-av{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:#dcfce7;color:#15803d;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.ccjv1-act-hero-b{flex:1;min-width:0}
.ccjv1-act-hero-t{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--navy);letter-spacing:-.2px}
.ccjv1-act-dot{width:8px;height:8px;border-radius:50%;background:#16a34a;flex-shrink:0;box-shadow:0 0 0 3px rgba(22,163,74,.16)}
.ccjv1-act-hero-s{font-size:11.5px;color:var(--gray);line-height:1.6;margin-top:3px}

.ccjv1-act-card{max-width:760px;margin:0 auto 12px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px 15px}
.ccjv1-act-card-t{font-size:10px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--navy);padding-bottom:9px;border-bottom:1px solid var(--border);margin-bottom:10px}
.ccjv1-act-kvs{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.ccjv1-act-kv{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--border);font-size:11.5px}
.ccjv1-act-kv span{color:var(--gray);flex-shrink:0}
.ccjv1-act-kv b{color:var(--navy);font-weight:600;text-align:right;word-break:break-word;font-variant-numeric:tabular-nums}

.ccjv1-act-trail{border:1px solid var(--border);border-radius:9px;overflow:hidden}
.ccjv1-act-tr{display:flex;align-items:flex-start;gap:11px;padding:10px 12px;border-bottom:1px solid var(--border)}
.ccjv1-act-tr:last-child{border-bottom:none}
.ccjv1-act-tn{flex-shrink:0;width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--ol);color:var(--gray);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.ccjv1-act-tr.done .ccjv1-act-tn{background:#dcfce7;color:#16a34a}
.ccjv1-act-tn svg{width:10px;height:10px}
.ccjv1-act-tb{flex:1;min-width:0}
.ccjv1-act-tl{font-size:12px;font-weight:600;color:var(--navy);line-height:1.4}
.ccjv1-act-to{font-size:10.5px;color:var(--gray);line-height:1.5;margin-top:1px}
.ccjv1-act-tm{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:3px;max-width:44%}
.ccjv1-act-town{padding:2px 7px;border-radius:4px;background:var(--light);color:var(--gray);font-size:9.5px;font-weight:700;letter-spacing:.2px;white-space:nowrap}
/* A stage somebody actually decided reads differently from one the machine closed. That is the
   distinction the whole journey turns on and it should survive into the record. */
.ccjv1-act-town.human{background:#ede9fe;color:#6d28d9}
.ccjv1-act-tart{font-size:10px;color:var(--gray);text-align:right;line-height:1.4;word-break:break-word}
.ccjv1-act-tart b{color:var(--navy);font-weight:700;font-variant-numeric:tabular-nums}

.ccjv1-act-done{max-width:760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 18px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px}
.ccjv1-act-done-t{font-size:13px;font-weight:700;color:#15803d}
.ccjv1-act-done-s{font-size:11.5px;color:var(--gray);margin-top:2px}

@media(max-width:1160px){
  .ccjv1-rdy-cert{padding:22px 20px 26px}
  .ccjv1-rdy-stamp{position:static;display:inline-block;transform:none;margin-bottom:10px}
  .ccjv1-rdy-head{flex-direction:column;gap:10px}
  .ccjv1-rdy-who{text-align:left}
  .ccjv1-pr-kvs,.ccjv1-act-kvs,.ccjv1-ps-emp{grid-template-columns:1fr}
  .ccjv1-ps{padding:20px 18px 22px}
  .ccjv1-act-tm{max-width:34%}
}

/* ---- SUCCESS SCREENS — employee created, proposal created ------------------------------------- */
.ccjv1-sc{flex:1;min-height:0;overflow-y:auto;padding:36px 30px;display:flex;flex-direction:column;align-items:center;text-align:center}
.ccjv1-sc-ico{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex-shrink:0}
.ccjv1-sc-ico.ok{background:#dcfce7;color:#16a34a}
.ccjv1-sc-ico svg{width:24px;height:24px}
.ccjv1-sc-title{font-size:19px;font-weight:700;color:var(--navy);margin-bottom:7px}
.ccjv1-sc-text{font-size:12.5px;color:var(--gray);line-height:1.6;max-width:400px;margin-bottom:22px}
.ccjv1-sc-grid{width:100%;max-width:440px;border:1px solid var(--border);border-radius:11px;overflow:hidden;margin-bottom:22px;text-align:left}
.ccjv1-sc-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;border-bottom:1px solid var(--border)}
.ccjv1-sc-row:last-child{border-bottom:none}
.ccjv1-sc-row span{font-size:11.5px;color:var(--gray);flex-shrink:0}
.ccjv1-sc-row b{font-size:12.5px;font-weight:600;color:var(--navy);text-align:right;word-break:break-word}
.ccjv1-sc-note{font-size:11.5px;color:var(--gray);line-height:1.6;max-width:420px}

/* ---- EVIDENCE DRAWER — overlays the work area, never reflows the run -------------------------- */
.ccjv1-dw-scrim{position:absolute;inset:0;background:rgba(15,23,42,.14);z-index:40;animation:fadeIn .18s ease}
.ccjv1-dw{position:absolute;top:0;right:calc(25% + 12px);bottom:0;width:460px;max-width:60%;z-index:41;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 40px rgba(15,23,42,.16);overflow:hidden;animation:ccjv1Slide .22s cubic-bezier(.4,0,.2,1)}
@keyframes ccjv1Slide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
.ccjv1-dw-head{flex-shrink:0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}
.ccjv1-dw-label{font-size:14px;font-weight:700;color:var(--navy)}
.ccjv1-dw-sub{font-size:11px;color:var(--gray);margin-top:2px}
.ccjv1-dw-x{width:26px;height:26px;flex-shrink:0;border:1px solid var(--border);border-radius:7px;background:var(--card);color:var(--gray);font-size:12px;cursor:pointer;line-height:1;transition:.15s}
.ccjv1-dw-x:hover{border-color:var(--navy);color:var(--navy)}
.ccjv1-dw-body{flex:1;min-height:0;overflow-y:auto;padding:15px 16px 20px;scrollbar-width:thin}
.ccjv1-dw-body::-webkit-scrollbar{width:4px}
.ccjv1-dw-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.10);border-radius:99px}
.ccjv1-dw-sec{margin-bottom:18px}
.ccjv1-dw-sec-t{font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--gray);margin-bottom:8px}
.ccjv1-dw-call{padding:9px 11px;border-radius:8px;background:var(--navy);color:#e2e8f0;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:11px;line-height:1.5;word-break:break-all;margin-bottom:7px}
.ccjv1-dw-kv{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--gray)}
.ccjv1-dw-kv b{color:var(--navy);font-weight:600}
.ccjv1-dw-rows{border:1px solid var(--border);border-radius:9px;overflow:hidden}
.ccjv1-dw-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:9px 11px;border-bottom:1px solid var(--border)}
.ccjv1-dw-row:last-child{border-bottom:none}
.ccjv1-dw-row.inactive{opacity:.45}
.ccjv1-dw-row-k{font-size:11.5px;font-weight:600;color:var(--navy);min-width:0}
.ccjv1-dw-row-k span{display:block;font-size:10px;font-weight:400;color:var(--gray);margin-top:1px}
.ccjv1-dw-row-v{font-size:11.5px;color:var(--navy);text-align:right;flex-shrink:0;max-width:52%;word-break:break-word}
.ccjv1-dw-checks{display:flex;flex-direction:column;gap:8px}
.ccjv1-dw-check{position:relative;padding:10px 11px;border:1px solid var(--border);border-radius:9px;background:var(--light)}
.ccjv1-dw-check.pass{border-left:3px solid #16a34a}
.ccjv1-dw-check.fail{border-left:3px solid #dc2626}
.ccjv1-dw-check-rule{font-size:11.5px;font-weight:600;color:var(--navy);line-height:1.5;margin-bottom:7px;padding-right:44px}
.ccjv1-dw-check-cmp{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:11px;padding:2px 0}
.ccjv1-dw-check-cmp span{color:var(--gray);flex-shrink:0}
.ccjv1-dw-check-cmp b{color:var(--navy);font-weight:600;text-align:right;word-break:break-word}
.ccjv1-dw-verdict{position:absolute;top:10px;right:11px;padding:2px 6px;border-radius:5px;font-size:8.5px;font-weight:700;letter-spacing:.4px}
.ccjv1-dw-verdict.pass{background:#dcfce7;color:#16a34a}
.ccjv1-dw-verdict.fail{background:#fee2e2;color:#dc2626}
.ccjv1-dw-note{padding:11px 12px;border-radius:9px;background:#faf5ff;border:1px solid #e9d5ff;font-size:11.5px;line-height:1.6;color:#581c87}
.ccjv1-dw-fail{margin-top:9px;padding:11px 12px;border-radius:9px;background:#fef2f2;border:1px solid #fecaca;font-size:11.5px;line-height:1.6;color:#7f1d1d}
.ccjv1-dw-fail b{display:block;font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;margin-bottom:3px}

/* ---- PLACEHOLDER — stages not yet designed ------------------------------------------------------ */
.ccjv1-placeholder{margin:auto;padding:40px 32px;text-align:center;max-width:460px}
.ccjv1-placeholder-tag{display:inline-block;padding:3px 9px;border-radius:6px;background:var(--ol);font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--gray);margin-bottom:11px}
.ccjv1-placeholder-title{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:7px}
.ccjv1-placeholder-note{font-size:12.5px;color:var(--gray);line-height:1.6}

/* ---- NARROWER VIEWPORTS -------------------------------------------------------------------------
   The panel is the last thing to go, not the first. On a laptop the chat column narrows and the
   form drops to one field per row; only below tablet width does the panel move above the work
   area, where it keeps its progress bar and scrolls. */
@media(max-width:1380px){
  .ccjv1-chat-col{flex:0 0 268px}
  .ccjv1-fgrid{gap:12px}
  .ccjv1-step{width:70px}
  .ccjv1-step-label{max-width:70px}
  .ccjv1-phase{padding:7px 9px 8px}
}
/* The rule line is the first thing to go when the head runs out of width — it is the only
   part of the phase that also survives in the tooltip, and losing the name or the count
   would cost more. */
@media(max-width:1160px){
  .ccjv1-chat-col{flex:0 0 240px}
  .ccjv1-fgrid{grid-template-columns:1fr}
  .ccjv1-fgroup.full{grid-column:auto}
  .ccjv1-dw{width:auto;left:12px;right:calc(25% + 12px);max-width:none}
  .ccjv1-phase-rule{display:none}
  .ccjv1-step{width:62px}
  .ccjv1-step-label{max-width:62px}
}
@media(max-width:980px){
  .ccjv1-body{flex-direction:column}
  .ccjv1-panel{flex:0 0 auto;max-width:none;max-height:40%}
  .ccjv1-work{flex-direction:column}
  .ccjv1-chat-col{flex:0 0 200px}
  .ccjv1-dw{left:0;right:0}
}

/* The agreement, as it appears in the client thread. */
.ccjv1-cbubble.doc{background:var(--card);border-color:var(--border);color:var(--navy)}
.ccjv1-cmsg.us .ccjv1-cbubble.doc{background:var(--card);border-color:var(--border);color:var(--navy)}
.ccjv1-cdoc{display:flex;align-items:center;gap:9px;padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--border)}
.ccjv1-cdoc svg{width:20px;height:20px;flex-shrink:0;color:var(--gray)}
.ccjv1-cdoc b{display:block;font-size:12.5px;font-weight:700;color:var(--navy)}
.ccjv1-cdoc i{display:block;font-size:10.5px;font-style:normal;color:var(--gray);margin-top:1px}

/* The client question — chips for who we already work with, composer for anyone new. */
.ccjv1-ask{background:var(--card)}
.ccjv1-ask-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px}
.ccjv1-ask-chip{padding:6px 11px;border:1px solid var(--border);border-radius:20px;background:var(--light);font-size:11px;font-weight:600;color:var(--navy);font-family:inherit;cursor:pointer;transition:.15s}
.ccjv1-ask-chip:hover{border-color:var(--navy);background:var(--card)}
.ccjv1-ask-note{font-size:10.5px;color:#94a3b8;line-height:1.5}

.ccjv1-tl-empty{font-size:12px;color:#94a3b8;padding:4px 0 8px}

.ccjv1-msa-foot{max-width:720px;margin:14px auto 0;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;animation:ccjv1In .3s ease both}
.ccjv1-msa-done{font-size:12.5px;font-weight:600;color:#15803d}