/* Experiment-only overrides. The canonical production-process files remain untouched. */

body[data-map-variant]:not([data-map-variant="original"]) .process-map {
  border-radius: 0;
}

body[data-map-variant]:not([data-map-variant="original"]) .process-map-header {
  border-radius: 0;
}

body[data-map-variant]:not([data-map-variant="original"]) .process-node .node-shape {
  fill: transparent;
  stroke: none;
}

body[data-map-variant]:not([data-map-variant="original"]) .process-node .node-shape,
body[data-map-variant]:not([data-map-variant="original"]) .process-node .node-mask {
  transition: fill 160ms linear, stroke 160ms linear, opacity 160ms linear;
}

body[data-map-variant]:not([data-map-variant="original"]) .diagram-route-option rect {
  --map-variant-accent: #2f7462;

  x: 0;
  y: 18px;
  width: 108px;
  height: 2px;
  rx: 0;
  fill: transparent;
  stroke: none;
}

body[data-map-variant]:not([data-map-variant="original"]) .diagram-route-option.is-active rect {
  fill: var(--map-variant-accent);
  stroke: none;
}

/* 01. Open ledger — no node containers, only baselines and type. */
body[data-map-variant="ledger"] .process-map {
  border: 0;
  border-top: 1px solid rgb(46 72 61 / 28%);
  border-bottom: 1px solid rgb(46 72 61 / 24%);
  background: rgb(250 252 250 / 96%);
  box-shadow: 0 1.5rem 4rem rgb(30 45 38 / 9%);
}

body[data-map-variant="ledger"] .process-map.is-expanded {
  box-shadow: 0 2rem 5rem rgb(30 45 38 / 12%);
}

body[data-map-variant="ledger"] .process-map-header {
  border-bottom-color: rgb(46 72 61 / 22%);
  background: rgb(250 252 250 / 94%);
}

body[data-map-variant="ledger"] .process-map-status > span {
  min-width: 0;
  padding: 0.2rem 0.58rem;
  border: 0;
  border-left: 2px solid #2f7462;
  border-radius: 0;
}

body[data-map-variant="ledger"] .process-map-summary li > button::before {
  height: 1px;
  border-radius: 0;
  background: linear-gradient(90deg, #2f7462 var(--step-fill, 0%), #aeb9b3 var(--step-fill, 0%));
}

body[data-map-variant="ledger"] .process-map-summary li.is-current > button::before {
  height: 3px;
  box-shadow: none;
}

body[data-map-variant="ledger"] .process-diagram {
  border: 0;
  border-top: 1px solid rgb(65 82 74 / 24%);
  border-bottom: 1px solid rgb(65 82 74 / 24%);
  background: #fafcfa;
}

body[data-map-variant="ledger"] .diagram-paper {
  fill: #fafcfa;
}

body[data-map-variant="ledger"] .diagram-lane,
body[data-map-variant="ledger"] .diagram-conditional-band {
  fill: transparent;
}

body[data-map-variant="ledger"] .diagram-rules {
  stroke: rgb(58 75 67 / 27%);
}

body[data-map-variant="ledger"] .process-node .node-mask {
  x: 12px;
  y: 57px;
  width: 76px;
  height: 1px;
  rx: 0;
  fill: #b8c1bc;
}

body[data-map-variant="ledger"] .process-node.is-current .node-mask,
body[data-map-variant="ledger"] .process-node.is-passed .node-mask {
  fill: #2f7462;
}

body[data-map-variant="ledger"] .process-node.is-optional .node-shape {
  fill: transparent;
  stroke: none;
}

body[data-map-variant="ledger"] .process-node.is-optional .node-mask {
  fill: #9a8275;
}

/* Shared quiet field for the five new minimal directions. */
body:is(
  [data-map-variant="typeflow"],
  [data-map-variant="pinpoint"],
  [data-map-variant="columns"],
  [data-map-variant="margin"],
  [data-map-variant="monoline"]
) .process-map {
  border: 0;
  border-top: 1px solid rgb(50 70 61 / 18%);
  border-bottom: 1px solid rgb(50 70 61 / 16%);
  background: rgb(252 253 252 / 96%);
  box-shadow: 0 1.4rem 4rem rgb(31 46 39 / 8%);
}

body:is(
  [data-map-variant="typeflow"],
  [data-map-variant="pinpoint"],
  [data-map-variant="columns"],
  [data-map-variant="margin"],
  [data-map-variant="monoline"]
) .process-map-header {
  border-bottom-color: rgb(58 76 68 / 16%);
  background: rgb(252 253 252 / 94%);
}

body:is(
  [data-map-variant="typeflow"],
  [data-map-variant="pinpoint"],
  [data-map-variant="columns"],
  [data-map-variant="margin"],
  [data-map-variant="monoline"]
) .process-map-status > span {
  min-width: 2.8rem;
  padding: 0.2rem 0.55rem 0.2rem 0;
  border: 0;
  border-right: 1px solid #aab4af;
  border-radius: 0;
  text-align: left;
}

body:is(
  [data-map-variant="typeflow"],
  [data-map-variant="pinpoint"],
  [data-map-variant="columns"],
  [data-map-variant="margin"],
  [data-map-variant="monoline"]
) .process-map-summary li > button::before {
  height: 1px;
  border-radius: 0;
  background: linear-gradient(90deg, #2f7462 var(--step-fill, 0%), #c5ccc8 var(--step-fill, 0%));
}

body:is(
  [data-map-variant="typeflow"],
  [data-map-variant="pinpoint"],
  [data-map-variant="columns"],
  [data-map-variant="margin"],
  [data-map-variant="monoline"]
) .process-map-summary li.is-current > button::before {
  height: 2px;
  box-shadow: none;
}

body:is(
  [data-map-variant="typeflow"],
  [data-map-variant="pinpoint"],
  [data-map-variant="columns"],
  [data-map-variant="margin"],
  [data-map-variant="monoline"]
) .process-diagram {
  border: 0;
  border-top: 1px solid rgb(59 77 69 / 16%);
  border-bottom: 1px solid rgb(59 77 69 / 16%);
  background: #fcfdfc;
}

body:is(
  [data-map-variant="typeflow"],
  [data-map-variant="pinpoint"],
  [data-map-variant="columns"],
  [data-map-variant="margin"],
  [data-map-variant="monoline"]
) .diagram-paper {
  fill: #fcfdfc;
}

body:is(
  [data-map-variant="typeflow"],
  [data-map-variant="pinpoint"],
  [data-map-variant="columns"],
  [data-map-variant="margin"],
  [data-map-variant="monoline"]
) .diagram-lane,
body:is(
  [data-map-variant="typeflow"],
  [data-map-variant="pinpoint"],
  [data-map-variant="columns"],
  [data-map-variant="margin"],
  [data-map-variant="monoline"]
) .diagram-conditional-band {
  fill: transparent;
}

body:is(
  [data-map-variant="typeflow"],
  [data-map-variant="pinpoint"],
  [data-map-variant="columns"],
  [data-map-variant="margin"],
  [data-map-variant="monoline"]
) .diagram-rules {
  stroke: rgb(63 81 73 / 17%);
}

/* 02. Type flow — hierarchy is carried only by type. */
body[data-map-variant="typeflow"] .process-node .node-mask {
  opacity: 0;
}

body[data-map-variant="typeflow"] .process-node.is-current .node-title {
  fill: #1f6955;
  font-weight: 840;
}

body[data-map-variant="typeflow"] .process-node.is-passed .node-title {
  fill: #33443c;
}

body[data-map-variant="typeflow"] .process-node.is-optional .node-title,
body[data-map-variant="typeflow"] .process-node.is-optional .node-sub {
  fill: #746b66;
}

/* 03. Pin point — a tiny datum marks each node without enclosing it. */
body[data-map-variant="pinpoint"] .process-node .node-title,
body[data-map-variant="pinpoint"] .process-node .node-sub {
  transform: translateY(-5px);
}

body[data-map-variant="pinpoint"] .process-node .node-mask {
  x: 48px;
  y: 55px;
  width: 4px;
  height: 4px;
  rx: 2px;
  fill: #9ca7a2;
}

body[data-map-variant="pinpoint"] .process-node.is-current .node-mask {
  x: 47px;
  y: 54px;
  width: 6px;
  height: 6px;
  rx: 3px;
  fill: #2f7462;
}

body[data-map-variant="pinpoint"] .process-node.is-passed .node-mask {
  fill: #658b7e;
}

body[data-map-variant="pinpoint"] .process-node.is-optional .node-mask {
  fill: #918078;
}

/* 04. Column guide — faint vertical rhythm replaces node containers. */
body[data-map-variant="columns"] .process-diagram {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(9.09% - 1px),
      rgb(55 78 68 / 11%) calc(9.09% - 1px),
      rgb(55 78 68 / 11%) 9.09%
    ),
    #fcfdfc;
}

body[data-map-variant="columns"] .diagram-paper {
  fill: rgb(252 253 252 / 55%);
}

body[data-map-variant="columns"] .process-node .node-mask {
  x: 49px;
  y: 2px;
  width: 1px;
  height: 10px;
  rx: 0;
  fill: #aeb8b3;
}

body[data-map-variant="columns"] .process-node.is-current .node-mask {
  x: 48px;
  width: 3px;
  fill: #2f7462;
}

body[data-map-variant="columns"] .process-node.is-passed .node-mask {
  fill: #6e9487;
}

body[data-map-variant="columns"] .process-node.is-optional .node-mask {
  fill: #93827a;
}

/* 05. Margin note — left alignment and one hairline create an editorial read. */
body[data-map-variant="margin"] .process-node .node-title,
body[data-map-variant="margin"] .process-node .node-sub {
  text-anchor: start;
  transform: translateX(-39px);
}

body[data-map-variant="margin"] .process-node .node-mask {
  x: 2px;
  y: 14px;
  width: 1px;
  height: 36px;
  rx: 0;
  fill: #aeb8b3;
}

body[data-map-variant="margin"] .process-node.is-current .node-mask {
  width: 2px;
  fill: #2f7462;
}

body[data-map-variant="margin"] .process-node.is-passed .node-mask {
  fill: #6f9185;
}

body[data-map-variant="margin"] .process-node.is-optional .node-mask {
  fill: #95847c;
}

/* 06. Mono line — almost monochrome, with green reserved for current state. */
body[data-map-variant="monoline"] .process-map-summary li > button::before {
  background: linear-gradient(90deg, #424b47 var(--step-fill, 0%), #d2d6d4 var(--step-fill, 0%));
}

body[data-map-variant="monoline"] .process-map-summary li.is-current > button::before {
  background: #2f7462;
}

body[data-map-variant="monoline"] .connector-normal {
  stroke: #747d79;
}

body[data-map-variant="monoline"] #process-arrow polygon {
  fill: #747d79;
}

body[data-map-variant="monoline"] .connector-exception {
  stroke: #8d8884;
}

body[data-map-variant="monoline"] #process-arrow-exception polygon {
  fill: #8d8884;
}

body[data-map-variant="monoline"] .process-node .node-mask {
  x: 14px;
  y: 57px;
  width: 72px;
  height: 1px;
  rx: 0;
  fill: #d0d5d2;
}

body[data-map-variant="monoline"] .process-node.is-current .node-mask {
  height: 2px;
  fill: #2f7462;
}

body[data-map-variant="monoline"] .process-node.is-passed .node-mask {
  fill: #777f7b;
}

body[data-map-variant="monoline"] .process-node.is-optional .node-title,
body[data-map-variant="monoline"] .process-node.is-optional .node-sub {
  fill: #736e6b;
}

body[data-map-variant="monoline"] .process-node.is-optional .node-mask {
  fill: #aaa4a0;
}