.j-cell { position: relative; display: block; width: 100%; min-width: 0; padding: 1px 22px 1px 0; border: 0; border-radius: 3px; background: transparent; text-align: left; }
.data-table td[data-order-cell="journey"]:has(.j-cell) { cursor: pointer; }
.data-table td[data-order-cell="journey"]:has(.j-cell):hover, .data-table td:has(.j-cell[aria-expanded="true"]) { background: var(--hover); }
.j-cell-chevron { position: absolute; top: 9px; right: 0; color: #858e9a; }
.j-cell[aria-expanded="true"] .j-cell-chevron { transform: rotate(180deg); }
.data-table .j-flow-row > td { position: static; left: auto; z-index: auto; height: auto; padding: 0; border-right: 0; background: #f6f8fa; }
.j-inline-flow { position: sticky; left: 0; width: min(100%, var(--flow-viewport-width, 100%)); padding: 14px; }
.j-graph-scroll { max-height: min(460px, 55vh); }
.j-inline-flow .j-graph-footer { background: #fff; }
.j-mini-track { display: flex; align-items: center; width: 100%; height: 30px; margin-bottom: 5px; }
.j-mini-node { --node-color: #8792a1; --node-halo: #8792a11c; display: grid; place-items: center; flex: 0 0 12px; width: 12px; height: 12px; }
.j-mini-dot { display: block; width: 9px; height: 9px; border: 2px solid var(--node-color); border-radius: 50%; background: #fff; }
.j-mini-node.is-lost { --node-color: #b65d4d; --node-halo: #b65d4d1c; }
.j-mini-node.is-lost .j-mini-dot { background: var(--node-color); }
.j-mini-node.is-current .j-mini-dot { width: 12px; height: 12px; border-width: 3px; box-shadow: 0 0 0 3px var(--node-halo); }
.j-mini-link { flex: 1; min-width: 8px; height: 0; margin: 0 5px; border-top: 1px solid #c7cdd4; }
.j-mini-count { flex: 0 0 auto; min-width: 25px; padding: 1px 4px; border-radius: 3px; color: #64717e; background: #eff2f5; text-align: center; font-size: 11px; font-weight: 500; }
.j-cell-current { display: flex; align-items: baseline; gap: 8px; }
.j-cell-current > strong { flex: 1; min-width: 0; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.j-cell-state { flex: 0 0 auto; padding: 1px 5px; border-radius: 3px; color: #61766a; background: #f0f5f2; font-size: 12px; white-space: nowrap; }
.j-cell-state.is-lost { color: #a65042; background: #f9ece9; }
.j-review-value { margin: -3px -6px; padding: 3px 6px; border: 1px solid transparent; border-radius: 4px; background: transparent; text-align: left; font: inherit; line-height: 1.5; }
.j-review-value:hover { border-color: #dce0e5; background: #f8f9fb; }
.properties dd:has(.j-review-value) { white-space: normal; }
.j-review-context, .j-review-note { display: block; margin-top: 5px; color: var(--secondary); font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.j-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-bottom: 14px; }
.j-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.j-graph-scroll { width: 100%; overflow: auto; overscroll-behavior-x: contain; border: 1px solid var(--line); border-radius: 5px 5px 0 0; background: #fcfcfd; scrollbar-width: thin; }
.j-graph-scroll:focus-visible { outline-offset: -2px; }
.j-graph-canvas { position: relative; isolation: isolate; }
.j-edges { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.j-edges path { fill: none; stroke: #c7cdd6; stroke-width: 1.5; }
.j-node { position: absolute; display: flex; flex-direction: column; align-items: flex-start; width: 178px; min-height: 136px; margin: 0; padding: 33px 10px 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; text-align: left; }
button.j-node:hover { background: #f0f3f8; }
.j-node[aria-pressed=true] { border-color: #bdcaf4; background: #f0f4ff; }
.j-node-channel { margin-top: 7px; color: var(--secondary); font-size: 13px; line-height: 1.5; }
.j-node-loss { margin-top: 7px; color: #a05246; font-size: 13px; }
.j-node[aria-pressed=true] .j-node-dot { border-color: #536faf; background: #536faf; }
.j-node-dot { position: absolute; top: 12px; left: 7px; display: grid; place-items: center; width: 14px; height: 14px; border: 2px solid #8d98a7; border-radius: 50%; color: #fff; background: #fcfcfd; }
.j-node.is-loss-anchor .j-node-dot { border-color: #b06759; background: #b06759; color: #fff; box-shadow: 0 0 0 4px #b0675914; }
.j-node.is-loss-anchor[aria-pressed=true] { border-color: #dfb7ad; background: #fcf3ef; }
.j-node-archive { margin-top: 7px; color: #876d64; font-size: 12px; line-height: 1.5; }
.j-node-date { color: var(--secondary); font-size: 13px; line-height: 20px; }
.j-node strong { max-width: 100%; margin: 4px 0 3px; font-size: 14px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.j-graph-footer { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 9px 13px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 5px 5px; }
.j-graph-controls { display: flex; align-items: center; gap: 5px; min-width: 0; width: 100%; }
.j-graph-controls .icon-button { width: 24px; height: 24px; flex-shrink: 0; }
.j-graph-slider { flex: 1; min-width: 60px; height: 5px; margin: 0 4px; accent-color: #8290a4; cursor: ew-resize; }
.j-inspector { min-width: 0; max-height: 510px; overflow-y: auto; padding: 18px; border: 1px solid var(--line); border-radius: 5px; background: #fff; scrollbar-gutter: stable; }
.j-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.j-section-head h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.j-section-head > .text-button { flex-shrink: 0; }
.j-section-head h3 { margin: 0; font-size: 14px; font-weight: 500; }
.j-section-head h3 > span { margin-left: 8px; color: var(--muted); font-size: 13px; font-weight: 400; }
.j-overline { display: block; margin-bottom: 5px; color: var(--secondary); font-size: 13px; }
.j-node-summary { margin: 18px 0 0; font-size: 14px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.j-record-link { display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; max-width: 100%; padding: 3px 0; border: 0; background: transparent; text-align: left; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.j-record-link:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.j-record-link > svg { flex-shrink: 0; color: #9198a2; }
.j-evidence-heading { margin: 20px 0 9px; }
.j-evidence { position: relative; display: block; width: 100%; margin-top: 7px; padding: 11px 34px 11px 12px; border: 1px solid var(--line); border-radius: 4px; background: #fff; text-align: left; }
.j-evidence:hover, .j-evidence[aria-expanded=true] { border-color: #bac7df; background: #f9faff; }
.j-evidence > span { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 5px; color: var(--secondary); font-size: 12px; }
.j-evidence time { margin-left: auto; }
.j-evidence > strong { display: block; font-size: 13px; font-weight: 400; line-height: 1.55; overflow-wrap: anywhere; }
.j-evidence > svg { position: absolute; right: 12px; top: 50%; margin-top: -7px; color: #8a93a0; }
.j-muted { margin: 12px 0; color: var(--secondary); font-size: 13px; line-height: 1.7; }
.j-danger-text { color: #a05246; }
.j-loss { margin: 22px 0 0; padding: 19px 22px; border: 1px solid #e8d9d5; border-left: 3px solid #b96c5c; border-radius: 4px; background: #fdfaf9; }
.j-remove-description { margin: 0; line-height: 1.8; font-size: 14px; }
.j-loss-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.j-loss-heading > div { display: flex; align-items: center; gap: 10px; }
.j-loss-heading strong { font-size: 16px; }
.j-loss-heading > time { color: #876e69; font-size: 13px; }
.j-loss > p { max-width: 940px; margin: 12px 0; font-size: 14px; line-height: 1.7; white-space: pre-wrap; }
.j-loss-context { display: flex; flex-wrap: wrap; gap: 6px 18px; color: #806f68; font-size: 13px; }
.j-loss .j-loss-note { color: #716861; font-size: 13px; }
.j-loss-evidence { max-width: 760px; margin-top: 14px; }
.j-loss-actions { display: flex; gap: 8px; margin-top: 17px; }
.j-loss.is-archived { margin-top: 15px; border-color: #dfe3e5; border-left-color: #9ea9a3; background: #fafbfa; }
.history-record > .j-loss { margin: 0; border-top: 0; border-bottom: 0; border-radius: 0; }
.j-loss .j-resumed { margin-top: 18px; padding-top: 12px; border-top: 1px solid #e0e6e3; color: #386b58; font-size: 13px; }
.j-empty { padding: 48px 20px; border-top: 1px solid var(--line); color: var(--secondary); text-align: center; }
.j-history-tools { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: -10px 0 26px; }
.j-history-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.j-history-filters button { padding: 4px 9px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--secondary); font-size: 13px; }
.j-history-filters button[aria-pressed=true] { border-color: #d9dfe8; color: var(--ink); background: #f1f3f6; }
.j-history-entry .history-icon { border-color: #e1e4e8; background: #f8f9fb; }
.modal:has(.j-form) { width: min(620px, 100%); }
.modal:has([data-form="j-record"]) { width: min(560px, 100%); }
.j-form input[type=number] { appearance: textfield; }
.j-form select { appearance: none; padding-right: 27px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2375808e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.j-form input:read-only, .j-form select:disabled, .j-form input:disabled { background: #f4f5f7; color: #8f97a2; }
.j-form .field > span, .j-form legend { color: #505a66; font-size: 13px; }
.j-checkbox-field > legend { margin-bottom: 8px; }
.j-basis-options { display: flex; flex-direction: column; gap: 12px; }
.j-basis-options label { display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 14px; }
.j-mail-body { margin: 26px 0; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.j-attachment { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding: 12px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; }
.j-attachment small { flex-basis: 100%; color: var(--secondary); font-size: 12px; }
.j-drawer-related { margin-top: 24px; }
.j-drawer-related h3 { margin: 0 0 8px; font-size: 14px; font-weight: 500; }
.j-drawer-related .j-record-link { display: flex; }
.j-inline-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.j-inline-heading > strong { font-size: 14px; font-weight: 500; }
.j-inline-calls { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 8px; max-height: 400px; overflow-y: auto; }
.j-inline-calls .j-evidence { margin: 0; }
.j-flow-content { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 16px; }
.j-flow-main { min-width: 0; }
.j-cell-current > time { color: var(--secondary); font-size: 12px; white-space: nowrap; }
.j-form [hidden] { display: none; }
.j-date-note { margin: -2px 0 0; color: var(--secondary); font-size: 12px; line-height: 1.6; }
@media (max-width: 1100px) {
  .j-flow-content { grid-template-columns: minmax(0, 1fr); }
  .j-inspector { max-height: none; }
  .j-inline-flow .j-inspector { max-height: 340px; }
}
@media (max-width: 800px) {
  .j-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .j-loss { padding: 16px; }
  .j-loss-heading strong { font-size: 15px; }
  .j-loss-heading > div { align-items: flex-start; }
}
@media (max-width: 640px) {
  .j-graph-controls { flex: 1; width: auto; }
  .j-graph-footer { gap: 14px; }
  .j-form .field-grid { grid-template-columns: 1fr; }
}