/* Financial cockpit motion — money flow only */

:root {
  --motion-instant: 120ms;
  --motion-fast: 200ms;
  --motion-base: 420ms;
  --motion-flow: 480ms;
  --motion-slow: 680ms;
  --motion-ambient: 12s;
  --motion-depth: 24s;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-deduct: cubic-bezier(0.4, 0, 1, 1);
  --ease-settle: cubic-bezier(0.34, 1.02, 0.64, 1);
  --comm-pressure: 0.5;
  --flow-comm: var(--accent-crimson, #b4233c);
  --flow-ship: #6b7280;
  --flow-vat: #52525b;
  --flow-net: linear-gradient(90deg, var(--primary, #7a2030), var(--accent-glow, #d13f5b));
  --glow-flow-net-pos: rgba(209, 63, 91, 0.22);
  --glow-flow-net-neg: rgba(245, 158, 11, 0.25);
}

/* —— 1–6: Horizontal profit flow (hero compact) —— */
.profit-flow {
  margin-bottom: 1rem;
}

.profit-flow__track {
  display: flex;
  height: 6px;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: var(--layer-input, #1e1e24);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.profit-flow__seg {
  display: block;
  height: 100%;
  width: 0%;
  flex-shrink: 0;
  transition: width var(--motion-flow) var(--ease-out-expo);
  will-change: width;
}

.profit-flow__seg--comm { background: var(--flow-comm); }
.profit-flow__seg--ship { background: var(--flow-ship); }
.profit-flow__seg--vat { background: var(--flow-vat); }
.profit-flow__seg--net {
  background: var(--flow-net);
  box-shadow: 0 0 16px var(--glow-flow-net-pos);
}

.profit-cockpit--negative .profit-flow__seg--net {
  background: #d97706;
  box-shadow: 0 0 12px var(--glow-flow-net-neg);
}

.profit-flow__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.profit-flow__legend span::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.profit-flow__legend .l-comm::before { background: var(--flow-comm); }
.profit-flow__legend .l-ship::before { background: var(--flow-ship); }
.profit-flow__legend .l-vat::before { background: var(--flow-vat); }
.profit-flow__legend .l-net::before { background: var(--accent-glow); }

/* —— Profit waterfall (tool sidebar) —— */
.profit-waterfall {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.profit-waterfall__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  align-items: center;
}

.profit-waterfall__label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.profit-waterfall__amount {
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  text-align: right;
}

.profit-waterfall__row--deduct .profit-waterfall__amount {
  color: var(--text-secondary);
}

.profit-waterfall__row--net .profit-waterfall__label {
  color: var(--accent-glow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.6875rem;
}

.profit-waterfall__bar {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 999px;
  background: var(--layer-input);
  overflow: hidden;
}

.profit-waterfall__bar > i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  transition: width var(--motion-flow) var(--ease-out-expo);
}

.profit-waterfall__row--revenue .profit-waterfall__bar > i {
  background: rgba(245, 245, 247, 0.35);
}

.profit-waterfall__row--deduct .profit-waterfall__bar > i {
  background: var(--flow-comm);
  opacity: 0.85;
}

.profit-waterfall__row--deduct[data-flow-row="shipping"] .profit-waterfall__bar > i {
  background: var(--flow-ship);
}

.profit-waterfall__row--deduct[data-flow-row="vat"] .profit-waterfall__bar > i {
  background: var(--flow-vat);
}

.profit-waterfall__row--net .profit-waterfall__bar > i {
  background: var(--flow-net);
  box-shadow: 0 0 12px var(--glow-flow-net-pos);
}

/* —— 7: Negative profit state —— */
.hero-calc-net,
[data-flow-net-display] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  transition: color var(--motion-fast) ease, text-shadow var(--motion-base) ease;
}

.hero-calc-net.is-negative,
[data-flow-net-display].is-negative {
  color: #fbbf24 !important;
  -webkit-text-fill-color: #fbbf24 !important;
  background: none !important;
  text-shadow: 0 0 20px var(--glow-flow-net-neg);
  filter: none;
}

.hero-calc-net.is-positive,
[data-flow-net-display].is-positive {
  color: var(--text-primary, #f5f5f7);
  -webkit-text-fill-color: unset;
  background: none;
  text-shadow: 0 0 24px var(--glow-flow-net-pos);
}

.hero-calc-net.is-updating {
  transform: scale(1.01);
  transition: transform var(--motion-instant) var(--ease-out-expo);
}

.hero-calc-margin,
[data-flow-margin] {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.hero-calc-margin.is-risk,
[data-flow-margin].is-risk {
  color: #fbbf24;
}

.hero-calc-margin.is-strong,
[data-flow-margin].is-strong {
  color: var(--accent-glow);
}

/* —— Negative atmosphere: weight, not alarm —— */
.profit-cockpit--negative.hero-calc-result,
.hero-calc-result.profit-cockpit--negative {
  background: #1c1a18;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(245, 158, 11, 0.2),
    0 0 24px -16px var(--glow-flow-net-neg);
  animation: none;
}

.profit-cockpit--negative .profit-flow__seg--net {
  opacity: 0.65;
}

.results-panel .profit-waterfall.profit-cockpit--negative,
[data-profit-flow].profit-cockpit--negative {
  opacity: 0.92;
}

[data-profit-flow].profit-cockpit--negative .profit-waterfall__row--net .profit-waterfall__bar > i {
  background: #d97706;
  box-shadow: 0 0 10px var(--glow-flow-net-neg);
}

/* —— M18: commission pressure on result glow —— */
.hero-calc-result[data-profit-cockpit] {
  transition: box-shadow var(--motion-fast) ease;
}

.hero-calc-result.profit-cockpit--settled:not(.profit-cockpit--negative):not(:focus-within) {
  box-shadow:
    inset 0 1px 0 var(--edge-highlight, rgba(255, 255, 255, 0.1)),
    inset 0 0 0 1px rgba(209, 63, 91, calc(0.12 + var(--comm-pressure) * 0.2)),
    0 0 calc(32px + var(--comm-pressure) * 28px) calc(-12px + var(--comm-pressure) * -4px)
      rgba(209, 63, 91, calc(0.08 + var(--comm-pressure) * 0.14));
}

/* —— M20: focus instrument —— */
.hero-calculator:focus-within .input-field:not(:focus) {
  opacity: 0.72;
  transition: opacity var(--motion-fast) var(--ease-out);
}

.hero-calculator .input-field:focus {
  opacity: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px var(--border-accent, rgba(180, 35, 60, 0.38));
}

/* —— 9: Slider system —— */
input[type='range'].input-range {
  background: linear-gradient(
    to right,
    var(--accent-crimson) 0%,
    var(--accent-crimson) var(--range-pct, 50%),
    rgba(255, 255, 255, 0.08) var(--range-pct, 50%)
  );
  transition: background var(--motion-fast) ease;
}

input[type='range'].input-range:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(209, 63, 91, 0.15), 0 0 16px var(--glow-flow-net-pos);
}

@media (prefers-reduced-motion: reduce) {
  .profit-flow__seg,
  .profit-waterfall__bar > i,
  .hero-calc-result {
    transition: none !important;
    animation: none !important;
  }
  .hero-calc-net.is-updating {
    transform: none;
  }
}