/* Ball in court + revision ladder — nav/cx-flow.css (markup from lib/flow.php)
 * Colours carry meaning but never alone: every state also has an icon and words. */
:root {
  --cxf-ink: #1c2420; --cxf-muted: #66706a; --cxf-line: #dfe4df; --cxf-panel: #ffffff; --cxf-soft: #f4f6f3;
  --cxf-us: #4a6b3a;   --cxf-us-soft: #edf3e8;
  --cxf-them: #2f5d8a; --cxf-them-soft: #e9f0f7;
  --cxf-ok: #1f7a4d;   --cxf-ok-soft: #e6f4ec;
  --cxf-noted: #24717a; --cxf-noted-soft: #e3f2f3;
  --cxf-revise: #a56412; --cxf-revise-soft: #fbf1e1;
  --cxf-bad: #b4332a;  --cxf-bad-soft: #fbeaea;
  --cxf-wait: #2f5d8a; --cxf-wait-soft: #e9f0f7;
}
body[data-theme="dark"] {
  --cxf-ink: #e7ece8; --cxf-muted: #9aa59e; --cxf-line: #2e3632; --cxf-panel: #161b18; --cxf-soft: #1d2320;
  --cxf-us: #8fb87a; --cxf-us-soft: #1f2b1b; --cxf-them: #7fb0e0; --cxf-them-soft: #172331;
  --cxf-ok: #5fc48f; --cxf-ok-soft: #142a1f; --cxf-noted: #5cc0c9; --cxf-noted-soft: #12282a;
  --cxf-revise: #e5a54d; --cxf-revise-soft: #2c2213; --cxf-bad: #ef7b72; --cxf-bad-soft: #2f1716;
  --cxf-wait: #7fb0e0; --cxf-wait-soft: #172331;
}

.cxf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cxf-i { width: 13px; height: 13px; flex: 0 0 auto; }

/* ── Court ─────────────────────────────────────────────── */
.cxf-court { font: 500 12px/1.3 Inter, system-ui, sans-serif; color: var(--cxf-ink); min-width: 0; }
.cxf-court-bar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); height: 46px;
  border: 1px solid var(--cxf-line); border-radius: 10px; overflow: hidden; background: var(--cxf-panel); }
.cxf-side { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 14px; min-width: 0; transition: background .25s ease, color .25s ease; color: var(--cxf-muted); }
.cxf-us { padding-right: 34px; }
.cxf-them { align-items: flex-end; text-align: right; padding-left: 34px; }
.cxf-k { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.cxf-v { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cxf-net { background: repeating-linear-gradient(180deg, var(--cxf-line) 0 4px, transparent 4px 7px); }
.cxf-ball { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 3px var(--cxf-panel), 0 2px 6px rgba(0,0,0,.18); transition: left .35s cubic-bezier(.3,.9,.3,1.15); left: 50%; }
.cxf-court.is-us .cxf-us { background: var(--cxf-us-soft); color: var(--cxf-us); }
.cxf-court.is-us .cxf-ball { left: calc(50% - 17px); color: var(--cxf-us); }
.cxf-court.is-them .cxf-them { background: var(--cxf-them-soft); color: var(--cxf-them); }
.cxf-court.is-them .cxf-ball { left: calc(50% + 17px); color: var(--cxf-them); }
.cxf-court.is-them.is-late .cxf-them { background: var(--cxf-bad-soft); color: var(--cxf-bad); }
.cxf-court.is-them.is-late .cxf-ball { color: var(--cxf-bad); }
.cxf-court.is-closed .cxf-court-bar { background: var(--cxf-soft); }
.cxf-court.is-closed .cxf-ball { display: none; }
.cxf-court-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 7px; color: var(--cxf-muted); }
.cxf-court-meta b { color: var(--cxf-ink); font-weight: 600; }
.cxf-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--cxf-soft); color: var(--cxf-muted); border: 1px solid var(--cxf-line); }
.cxf-chip.late { background: var(--cxf-bad-soft); color: var(--cxf-bad); border-color: transparent; }
.cxf-chip.soon { background: var(--cxf-revise-soft); color: var(--cxf-revise); border-color: transparent; }
.cxf-chip.ok { background: var(--cxf-ok-soft); color: var(--cxf-ok); border-color: transparent; }

/* ── Ladder ────────────────────────────────────────────── */
.cxf-ladder { display: flex; align-items: stretch; gap: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: thin; min-width: 0; }
.cxf-rung { position: relative; flex: 0 0 auto; display: flex; align-items: center; }
.cxf-rung + .cxf-rung::before { content: ""; width: 14px; height: 2px; background: var(--cxf-line); flex: 0 0 auto; }
.cxf-rung-b { display: inline-flex; align-items: center; gap: 0; height: 30px; border-radius: 8px; border: 1px solid var(--k-line, var(--cxf-line));
  background: var(--k-soft, var(--cxf-soft)); color: var(--k, var(--cxf-muted)); text-decoration: none; font: 600 11.5px/1 Inter, system-ui, sans-serif; overflow: hidden; }
a.cxf-rung-b:hover { filter: brightness(.97); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 0 0 3px color-mix(in srgb, var(--k, #888) 14%, transparent); }
.cxf-rung-n { align-self: stretch; display: grid; place-items: center; min-width: 30px; padding: 0 7px; background: var(--k, var(--cxf-muted)); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cxf-rung-s { display: inline-flex; align-items: center; gap: 5px; padding: 0 9px 0 7px; white-space: nowrap; }
.cxf-rung.d-approved { --k: var(--cxf-ok); --k-soft: var(--cxf-ok-soft); --k-line: transparent; }
.cxf-rung.d-answered { --k: var(--cxf-ok); --k-soft: var(--cxf-ok-soft); --k-line: transparent; }
.cxf-rung.d-noted    { --k: var(--cxf-noted); --k-soft: var(--cxf-noted-soft); --k-line: transparent; }
.cxf-rung.d-revise   { --k: var(--cxf-revise); --k-soft: var(--cxf-revise-soft); --k-line: transparent; }
.cxf-rung.d-rejected { --k: var(--cxf-bad); --k-soft: var(--cxf-bad-soft); --k-line: transparent; }
.cxf-rung.d-pending  { --k: var(--cxf-wait); --k-soft: var(--cxf-panel); --k-line: color-mix(in srgb, var(--cxf-wait) 45%, transparent); }
.cxf-rung.d-draft    { --k: var(--cxf-muted); --k-soft: var(--cxf-panel); --k-line: var(--cxf-line); }
.cxf-rung.d-pending .cxf-rung-b { border-style: dashed; }
.cxf-rung.is-current .cxf-rung-b { box-shadow: 0 0 0 2px var(--cxf-panel), 0 0 0 4px color-mix(in srgb, var(--k) 40%, transparent); }
.cxf-rung.is-current.d-pending .cxf-rung-n { animation: cxf-pulse 2.2s ease-in-out infinite; }
@keyframes cxf-pulse { 50% { filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { .cxf-rung.is-current.d-pending .cxf-rung-n { animation: none; } .cxf-ball { transition: none; } }
/* history rungs collapse to just the number when space is tight */
.cxf-ladder.compact .cxf-rung:not(.is-current) .cxf-rung-s span { display: none; }
.cxf-ladder.compact .cxf-rung:not(.is-current) .cxf-rung-s { padding: 0 6px; }

/* small ladder: dots for log rows */
.cxf-ladder.sm { gap: 0; overflow: visible; }
.cxf-ladder.sm .cxf-rung + .cxf-rung::before { width: 5px; height: 1.5px; }
.cxf-ladder.sm .cxf-rung-b { width: 10px; height: 10px; border-radius: 50%; border-width: 1.5px; background: var(--k); border-color: var(--k); padding: 0; }
.cxf-ladder.sm .cxf-rung.d-pending .cxf-rung-b, .cxf-ladder.sm .cxf-rung.d-draft .cxf-rung-b { background: var(--cxf-panel); border-style: solid; }
.cxf-ladder.sm .cxf-rung.is-current .cxf-rung-b { box-shadow: 0 0 0 2px color-mix(in srgb, var(--k) 25%, transparent); }

/* ── Mini court (log rows) ─────────────────────────────── */
.cxf-mini { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; font: 600 11.5px/1.2 Inter, system-ui, sans-serif; color: var(--cxf-muted); }
.cxf-mini-court { position: relative; flex: 0 0 auto; display: inline-grid; grid-template-columns: 1fr 1fr; width: 26px; height: 14px; border-radius: 4px; overflow: hidden; border: 1px solid var(--cxf-line); background: var(--cxf-panel); }
.cxf-mini-court i + i { border-left: 1px dashed var(--cxf-line); }
.cxf-mini-court b { position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: currentColor; }
.cxf-mini.is-us { color: var(--cxf-us); } .cxf-mini.is-us .cxf-mini-court i:first-child { background: var(--cxf-us-soft); } .cxf-mini.is-us .cxf-mini-court b { left: 4px; }
.cxf-mini.is-them { color: var(--cxf-them); } .cxf-mini.is-them .cxf-mini-court i:last-child { background: var(--cxf-them-soft); } .cxf-mini.is-them .cxf-mini-court b { right: 4px; }
.cxf-mini.is-late { color: var(--cxf-bad); } .cxf-mini.is-late .cxf-mini-court i:last-child { background: var(--cxf-bad-soft); }
.cxf-mini.is-closed { color: var(--cxf-muted); } .cxf-mini.is-closed .cxf-mini-court b { display: none; }
.cxf-mini-l { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cxf-mini-d { flex: 0 0 auto; padding: 1px 5px; border-radius: 4px; background: var(--cxf-soft); color: var(--cxf-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.cxf-mini.is-late .cxf-mini-d { background: var(--cxf-bad-soft); color: var(--cxf-bad); }

/* ── Status header used by the Submittal and RFI editors ─── */
.cxf-head { display: grid; gap: 14px; padding: 16px 20px 14px; background: var(--cxf-panel); border-bottom: 1px solid var(--cxf-line); }
.cxf-head-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.cxf-head-id { flex: 0 0 auto; }
.cxf-head-t { flex: 1 1 auto; min-width: 0; }
.cxf-head-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cxf-panel-k { font: 600 10px/1 Inter, system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--cxf-muted); margin: 0 0 7px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cxf-next { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 10px 9px 12px; border-radius: 10px; background: var(--cxf-soft); border: 1px solid var(--cxf-line); }
.cxf-next-t { flex: 1 1 220px; min-width: 0; font: 500 12.5px/1.35 Inter, system-ui, sans-serif; color: var(--cxf-muted); }
.cxf-next-t b { color: var(--cxf-ink); font-weight: 600; }
.cxf-status { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 6px; font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: .03em; text-transform: uppercase; background: var(--k-soft, var(--cxf-soft)); color: var(--k, var(--cxf-muted)); flex: 0 0 auto; }
.cxf-status.d-approved, .cxf-status.d-answered { --k: var(--cxf-ok); --k-soft: var(--cxf-ok-soft); }
.cxf-status.d-noted { --k: var(--cxf-noted); --k-soft: var(--cxf-noted-soft); }
.cxf-status.d-revise { --k: var(--cxf-revise); --k-soft: var(--cxf-revise-soft); }
.cxf-status.d-rejected { --k: var(--cxf-bad); --k-soft: var(--cxf-bad-soft); }
.cxf-status.d-pending { --k: var(--cxf-wait); --k-soft: var(--cxf-wait-soft); }
@container cxpane (max-width: 640px) { .cxf-head-grid { grid-template-columns: 1fr; } .cxf-head { padding: 14px; } }
@media (max-width: 640px) { .cxf-head-grid { grid-template-columns: 1fr; } }