/* value_added_lab.css -- a make-and-sell scene above one clean value-added breakdown bar
   (bought-in cost · wages & rent · profit) with a "value added" bracket on top and a
   "selling price" bracket below, plus a DOM legend that names every colour. */
.valadd { --val-a: #f97316; --val-soft: #fed7aa; }
.val-svg { display: block; width: 100%; height: auto; color: var(--val-a); }
.val-bg { fill: #07111f; }

/* ── make-and-sell scene ───────────────────────────────────────────────── */
.val-node rect {
  fill: rgba(15, 23, 42, 0.86);
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1.2;
}
.val-business rect {
  fill: color-mix(in srgb, var(--val-a) 16%, #0f172a);
  stroke: color-mix(in srgb, var(--val-a) 60%, rgba(255, 255, 255, 0.16));
  stroke-width: 1.8;
  filter: drop-shadow(0 9px 16px rgba(0, 0, 0, 0.22));
}
.val-node-title {
  fill: #f8fafc; font-size: 13px; font-weight: 800;
  paint-order: stroke; stroke: #07111f; stroke-width: 3px; stroke-linejoin: round;
}
.val-node-sub {
  fill: #cbd5e1; font-size: 11px; font-weight: 600;
  paint-order: stroke; stroke: #07111f; stroke-width: 3px; stroke-linejoin: round;
}
.val-action-label {
  fill: var(--val-soft); font-size: 11px; font-weight: 750;
  paint-order: stroke; stroke: #07111f; stroke-width: 3px; stroke-linejoin: round;
}
.val-number {
  fill: #ffffff; font-size: 27px; font-weight: 900; font-variant-numeric: tabular-nums;
  paint-order: stroke; stroke: #07111f; stroke-width: 4px; stroke-linejoin: round;
}
.val-arrow {
  fill: none; stroke: rgba(226, 232, 240, 0.6); color: rgba(226, 232, 240, 0.72);
  stroke-width: 2.4; stroke-linecap: round;
}
.val-icon {
  fill: color-mix(in srgb, var(--val-a) 27%, #0f172a); stroke: var(--val-soft);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.val-icon-line {
  fill: none; stroke: #fff7ed; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.82;
}

/* ── breakdown bar ─────────────────────────────────────────────────────── */
.val-bar-title { fill: #aeb9c8; font-size: 12.5px; font-weight: 650; letter-spacing: 0.01em; }
.val-bar-frame { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1.3; }
.val-seg-in    { fill: rgba(56, 189, 248, 0.62); }
.val-seg-other { fill: rgba(167, 139, 250, 0.66); }
.val-seg-profit {
  fill: rgba(52, 211, 153, 0.82);
  filter: drop-shadow(0 0 7px rgba(52, 211, 153, 0.28));
}
.val-loss-out { fill: none; stroke: #fb7185; stroke-width: 2; stroke-dasharray: 5 3; }
.val-seg-num {
  fill: #ffffff; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
  paint-order: stroke; stroke: rgba(2, 6, 23, 0.55); stroke-width: 3px; stroke-linejoin: round;
}

/* brackets — the two key sums */
.val-brk { fill: none; stroke: var(--val-soft); stroke-width: 2; stroke-linejoin: round; }
.val-brk-sell { stroke: rgba(148, 163, 184, 0.7); }
.val-brk-label {
  fill: var(--val-soft); font-size: 14px; font-weight: 850; font-variant-numeric: tabular-nums;
  paint-order: stroke; stroke: #07111f; stroke-width: 3.4px; stroke-linejoin: round;
}
.val-brk-label-sell { fill: #cbd5e1; font-weight: 700; }

/* ── legend ────────────────────────────────────────────────────────────── */
.val-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem 1.15rem;
  margin-top: -0.2rem;
}
.val-leg { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: #cbd5e1; font-weight: 600; }
.val-sw { width: 0.85rem; height: 0.85rem; border-radius: 0.28rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.val-sw-in     { background: rgba(56, 189, 248, 0.62); }
.val-sw-other  { background: rgba(167, 139, 250, 0.66); }
.val-sw-profit { background: rgba(52, 211, 153, 0.82); }

/* live equation: colour the profit result, green for profit, rose for a loss */
.val-eq-pos { color: #6ee7b7 !important; }
.val-eq-neg { color: #fb7185 !important; }

/* profit readout card flips to a loss tone when negative */
.valadd .lv-rcard.val-neg { border-color: rgba(251, 113, 133, 0.4); }
.valadd .lv-rcard.val-neg::before { background: #fb7185; }
.valadd .lv-rcard.val-neg .lv-rlabel { color: #fda4af; }

@media (max-width: 520px) {
  .val-number { font-size: 23px; }
  .val-leg { font-size: 0.8rem; }
}