/* CRO page (rebuild 10-11): batch-design hero, the step cards' record line, the orders board lower down. */
.cro-batch { padding: 16px 18px 18px; font-size: 12px; line-height: 1.4; color: var(--ink); }
.cro-batch__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; font-size: 11.5px; color: var(--ink-2); }
.cro-batch__head b { font-weight: 500; color: var(--ink); }
.cro-plate { display: grid; grid-template-columns: 18px repeat(12, minmax(0, 1fr)); gap: 5px 6px; padding: 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--card); }
.cro-plate i { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--muted); text-align: center; align-self: center; }
.cro-plate b { aspect-ratio: 1; border-radius: 50%; background: #9FCDA2; border: 1px solid #6FA873; }
.cro-plate b.flag { background: #F2C497; border-color: #C98A4E; }
.cro-batch__rows { margin-top: 12px; }
.cro-batch .co-srcs { margin-top: 12px; }
.co-row.co-row--trail { border-bottom: 0; margin-top: 4px; padding: 9px 10px; border-radius: 6px; background: #EEEEF6; color: #3F4796; }
.co-row.co-row--trail b { color: #2E3570; }
.cro-hero__alt { margin-left: 4px; align-self: center; font-size: 14px; }
.cro-hero__note { margin-top: 16px; font-size: 14px; color: var(--ink-2); }
.grid-4.cro-two { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; margin-top: 8px; }
.grid-4.cro-two .status { align-self: flex-start; }
.cro-board { margin: 36px 0 0; }
@media (max-width: 760px) { .grid-4.cro-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 540px) { .cro-plate { gap: 3px 3px; padding: 8px; grid-template-columns: 14px repeat(12, minmax(0, 1fr)); } .cro-plate i { font-size: 8px; } }

/* Plan it: a Gibson plan drawn like the app's workflow canvas (dotted canvas, node cards, bezier edges from cro.js). */
.cro-flow { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "vec dig gib" "ins pcr gel"; gap: 40px 34px; padding: 26px 18px; border: 1px solid var(--rule); border-radius: 10px; background: #FAFAF9 radial-gradient(#D9DAE0 1px, transparent 1.2px) 0 0 / 14px 14px; }
.cro-node { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; padding: 10px 11px; background: #fff; border: 1px solid #E1E2E6; border-radius: 9px; box-shadow: 0 1px 2px rgba(20,18,15,.05); font-size: 11.5px; line-height: 1.35; color: #5E6167; }
.cro-node[data-node="vec"] { grid-area: vec; } .cro-node[data-node="ins"] { grid-area: ins; } .cro-node[data-node="dig"] { grid-area: dig; }
.cro-node[data-node="pcr"] { grid-area: pcr; } .cro-node[data-node="gib"] { grid-area: gib; } .cro-node[data-node="gel"] { grid-area: gel; }
.cro-node[data-node="gib"] { border-color: #2563EB; box-shadow: 0 0 0 1px #2563EB, 0 6px 18px rgba(37,99,235,.10); }
.cro-node__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cro-node__head b { font-size: 12.5px; font-weight: 600; color: #121316; letter-spacing: -.01em; line-height: 1.25; }
.cro-node__st { position: absolute; top: -9px; right: 10px; padding: 1px 7px; border: 1px solid #E1E2E6; border-radius: 100px; background: #fff; font-size: 10px; font-weight: 500; color: #5E6167; }
.cro-node__st::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #16A34A; vertical-align: 1px; }
.cro-ic { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; border: 1px solid; }
.cro-ic svg { width: 13px; height: 13px; }
.cro-ic--dna { color: #16A34A; background: #E8F5EC; border-color: #C6E6CF; }
.cro-ic--op { color: #0891B2; background: #E6F4F8; border-color: #C3E4EE; }
.cro-ic--gel { color: #65A30D; background: #EEF5E5; border-color: #D3E6BF; }
.cro-flow__edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cro-flow__edges path { fill: none; stroke: #9A9CA3; stroke-width: 1.6; }
.cro-flow__edges circle { fill: #fff; stroke: #9A9CA3; stroke-width: 1.4; }
.cro-flow:not([data-ready]) .cro-flow__edges { opacity: 0; }
@media (max-width: 540px) {
  .cro-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "vec ins" "dig pcr" "gib gib" "gel gel"; gap: 30px 16px; padding: 22px 12px; }
  .cro-node[data-node="gib"], .cro-node[data-node="gel"] { justify-self: center; width: 72%; }
}