:root {
  font-family: Inter, system-ui, sans-serif;
  color: #1d342d;
  background: #f3f6f4;
  --g: #086c56;
  --line: #d5e0da;
  --muted: #62746c;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
[hidden] {
  display: none !important;
}
button,
input,
select,
textarea {
  font: inherit;
  border: 1px solid #b9cac1;
  border-radius: 7px;
  padding: 9px;
  background: #fff;
  color: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
}
.primary {
  background: var(--g);
  border-color: var(--g);
  color: white;
}
.secondary {
  background: #fff;
}
.quiet,
.inline {
  border: 0;
  background: transparent;
  color: var(--g);
  padding: 5px;
}
.inline {
  text-decoration: underline;
  font-size: 12px;
}
.eyebrow {
  margin: 0 0 7px;
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #5c766a;
}
.hint {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}
.chip {
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 5px 9px;
  color: #426156;
}
header {
  height: 60px;
  padding: 0 max(22px, calc((100% - 1420px) / 2));
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #153a31;
  color: white;
}
header b {
  font-size: 13px;
  letter-spacing: 0.13em;
}
header b span {
  font-weight: 400;
  color: #b9d2c7;
}
main {
  max-width: 1420px;
  margin: auto;
  padding: 35px 24px;
}
.intro,
.run,
.heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
}
.intro {
  margin-bottom: 26px;
}
.intro h1 {
  font-size: clamp(28px, 3.2vw, 43px);
  letter-spacing: -0.04em;
  font-weight: 560;
  margin: 0 0 9px;
}
.intro p:not(.eyebrow) {
  max-width: 680px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
.tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 21px;
}
.tabs button {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 2px;
}
.tabs button[aria-selected="true"] {
  color: var(--g);
  border-bottom: 3px solid var(--g);
  font-weight: 700;
}
.layout {
  display: grid;
  grid-template-columns: 265px minmax(470px, 1fr) 255px;
  gap: 18px;
  align-items: start;
}
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
}
.panel h2 {
  font-size: 17px;
  margin: 0;
}
.panel label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  margin: 16px 0 6px;
}
.panel input,
.panel select {
  width: 100%;
}
.actions {
  display: flex;
  gap: 8px;
  margin-top: 17px;
}
.actions > * {
  flex: 1;
}
.stock-row,
.component-row {
  display: grid;
  grid-template-columns: 1fr 54px 54px;
  gap: 5px;
  margin-bottom: 6px;
}
.stock-row input,
.component-row input {
  min-width: 0;
  padding: 7px;
}
.component-row button {
  padding: 3px;
}
.simulator {
  padding: 0;
  overflow: hidden;
}
.run {
  padding: 20px;
}
.run h2 {
  font-size: 22px;
  font-weight: 560;
}
.notice {
  margin: 0 20px 13px;
  padding: 11px;
  border-left: 3px solid #a95220;
  background: #fcf5ee;
  color: #6f391b;
  font-size: 12px;
  line-height: 1.5;
}
.details,
.compare {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1px;
  background: var(--line);
}
.details article,
.compare article {
  padding: 19px 21px;
  background: #fff;
  min-height: 155px;
}
.details h3,
.compare h3 {
  font-size: 17px;
  margin: 0 0 8px;
}
.details p,
.compare p:not(.eyebrow) {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.details dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 12px;
}
.details dt {
  color: #648074;
}
.details dd {
  margin: 0;
}
.play {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 15px 20px;
  background: #f7faf8;
}
.play button,
.play select {
  font-size: 12px;
}
.play input {
  flex: 1;
  accent-color: var(--g);
}
.compare > article {
  min-height: 120px;
}
.compare div {
  font-size: 12px;
  line-height: 1.55;
  color: #50685d;
}
.compare div p {
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #edf1ee;
}
.history {
  padding: 17px 21px;
  font-size: 12px;
}
.history li {
  margin: 7px 0;
  color: #546b60;
}
.side {
  display: grid;
  gap: 18px;
}
.saved {
  padding: 11px 0;
  border-bottom: 1px solid #e7eee9;
  font-size: 12px;
}
.saved strong,
.saved small {
  display: block;
}
.saved small {
  color: var(--muted);
  margin: 4px 0 8px;
}
.saved button {
  padding: 4px 7px;
  font-size: 11px;
  margin-right: 4px;
}
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
  background: linear-gradient(145deg, #12362d, #235544);
}
.login > div {
  width: min(430px, 100%);
  padding: 34px;
  background: white;
  border-radius: 14px;
}
.login h1 {
  margin: 0 0 12px;
  font-size: 30px;
  letter-spacing: -0.04em;
}
.login p:not(.eyebrow) {
  line-height: 1.6;
  color: var(--muted);
}
dialog {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 25px;
  width: min(520px, calc(100% - 30px));
}
dialog::backdrop {
  background: #10271e88;
}
.close {
  float: right;
  border: 0;
  background: transparent;
  font-size: 25px;
  padding: 0;
}
dialog label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  margin: 14px 0 6px;
}
dialog input,
dialog textarea {
  width: 100%;
}
dialog textarea {
  min-height: 110px;
}
@media (max-width: 1100px) {
  .layout {
    grid-template-columns: 250px minmax(420px, 1fr);
  }
  .side {
    grid-column: 1/-1;
    grid-template-columns: 1fr 1fr;
  }
  .side #adminPanel {
    grid-column: auto;
  }
}
@media (max-width: 760px) {
  main {
    padding: 23px 15px;
  }
  .layout {
    display: block;
  }
  .panel,
  .side {
    margin-bottom: 15px;
  }
  .side {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .intro {
    display: block;
  }
  .intro .primary {
    margin-top: 15px;
  }
  .details,
  .compare {
    grid-template-columns: 1fr;
  }
  .play {
    flex-wrap: wrap;
  }
  .play input {
    order: 2;
    flex-basis: 60%;
  }
}

button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #08785e;
  outline-offset: 3px;
}
.map .link {
  cursor: pointer;
  border-bottom: 1px dotted currentColor;
  padding: 3px;
}
.map[data-view="inventory"] .link {
  color: #795300;
}
.map[data-view="backward"] .link {
  color: #3758a0;
}
.map.playing .system.active {
  animation: flow-pulse 1.2s ease-in-out infinite;
}
@keyframes flow-pulse {
  50% {
    box-shadow: 0 0 0 8px #07826328;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.snapshot-table-wrapper {
  max-width: 100%;
  overflow: auto;
  border: 1px solid #dce7e1;
  border-radius: 6px;
  margin: 10px 0;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}
th,
td {
  text-align: left;
  padding: 7px;
  border-bottom: 1px solid #dce7e1;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.snapshot-table-wrapper table {
  min-width: 460px;
}
#snapshotSources details {
  margin-block: 12px;
}
#snapshotSources summary {
  cursor: pointer;
  font-weight: 600;
}
#governancePanel {
  overflow-wrap: anywhere;
}
#governancePanel section {
  margin-top: 20px;
}
#governancePanel input,
#governancePanel textarea,
#governancePanel select {
  max-width: 100%;
}

/* Keep arbitrary line IDs and component editors inside the scenario column. */
.layout > *, .panel, .line-card, .component-row > * { min-width: 0; }
.line-card { margin: 14px 0; padding: 10px; overflow-wrap: anywhere; }
.component-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.component-row > label:first-child { grid-column: 1 / -1; }
.panel textarea { width: 100%; min-width: 0; }
.stock-row { grid-template-columns: minmax(0, 1fr) 54px 54px; overflow-wrap: anywhere; }
.play select { width: auto; flex: 0 0 auto; }
.play input { width: 0; min-width: 50px; }

/* Connected process diagram: stable coordinates, readable lanes and directional paths. */
.flow-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; border-top:1px solid #e4e9ee; }
.flow-toolbar strong { font-size:16px; color:#172f3c; }
.flow-toolbar p { margin:5px 0 0; font-size:12px; color:#617381; }
.flow-key { display:flex; align-items:center; gap:7px; font-size:11px; white-space:nowrap; color:#527063; }
.flow-key i { width:8px; height:8px; border-radius:50%; background:#08785e; }
.flow-scroll { overflow-x:auto; background:#f8fafb; }
.map { position:relative; height:390px; min-width:700px; background:#f8fafb; border-block:1px solid #e1e8ed; --route-color:#7f95a5; }
.lane { position:absolute; top:0; bottom:0; border-right:1px solid #e3e9ee; }
.lane span { position:absolute; top:23px; left:20px; font-size:9px; font-weight:700; letter-spacing:1.2px; color:#6b7d8c; }
.lane-store { left:0; width:32%; }
.lane-erp { left:32%; width:37%; background:#f1f5f7; }
.lane-wms { left:69%; width:31%; border:0; }
.flow-connectors { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.route { fill:none; stroke:var(--route-color); stroke-width:2; vector-effect:non-scaling-stroke; marker-end:url(#flow-arrow); }
.map[data-view="backward"] { --route-color:#5074a4; }
.map[data-view="inventory"] { --route-color:#92712b; }
.map[data-view="backward"] .route,.map[data-view="inventory"] .route { marker-end:none; marker-start:url(#flow-arrow); }
.map[data-view="inventory"] .route-order { stroke:#aab3bb; stroke-dasharray:4 5; marker-start:none; }
.route.is-current { stroke:#08785e; stroke-width:3; }
.map.playing .route.is-current { stroke-dasharray:8 5; animation:route-travel .7s linear infinite; }
.map.playing[data-view="backward"] .route.is-current,.map.playing[data-view="inventory"] .route.is-current { animation-direction:reverse; }
@keyframes route-travel { to { stroke-dashoffset:-26; } }
.map .system { position:absolute; width:23%; height:140px; padding:14px; background:#fff; border:1px solid #cfdae1; border-radius:9px; text-align:left; box-shadow:0 3px 8px #1b394c08; transition:border-color .18s,box-shadow .18s; }
.map .system:hover { border-color:#637f8d; box-shadow:0 4px 12px #1b394c12; }
.map .system strong { display:block; font-size:20px; letter-spacing:-.4px; color:#1c3543; margin:8px 0 7px; }
.map .system small { display:block; color:#5e7380; font-size:11px; line-height:1.4; }
.system-tag { display:block; font-size:8px; letter-spacing:1px; font-weight:700; color:#6b7d8a; }
.system-state { display:block; border-top:1px solid #edf0f3; margin-top:10px; padding-top:8px; color:#476677; font-size:10px; }
.map .shopify { left:2.5%; top:calc(53.48% - 70px); }
.map .erp { left:38.5%; top:calc(53.48% - 70px); border-top:3px solid #254d60; }
.map .pakk { left:74.6%; top:calc(28.91% - 70px); }
.map .psi { left:74.6%; top:calc(77.61% - 70px); }
.map .system.active { border:2px solid #08785e; box-shadow:0 0 0 4px #07826313; }
.map .link { position:absolute; border:0; padding:5px 3px; background:#f8fafb; color:#426170; text-align:center; font-size:10px; line-height:1.3; font-weight:650; border-radius:4px; }
.map .link:hover { background:#e3edf2; }
.map .link span { display:block; font-size:9px; font-weight:400; color:#6b7d89; margin-top:4px; }
.map .a { left:25.5%; width:13%; top:calc(53.48% - 53px); }
.map .b { left:61.5%; width:13%; top:calc(28.91% - 53px); }
.map .c { left:61.5%; width:13%; top:calc(77.61% + 12px); }
.flow-caption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; font-size:11px; color:#607887; padding:14px 24px; border-bottom:1px solid #e3e9ee; line-height:1.5; }
.flow-caption span:first-child { color:#385669; }
@media (max-width:760px) { .flow-toolbar { padding:16px; align-items:flex-start; } .flow-key { font-size:10px; } .flow-caption { padding:14px 16px; } }
@media (prefers-reduced-motion:reduce) { .map.playing .route.is-current { animation:none; stroke-dasharray:none; } }

.flow-mobile { display:none; }
@media (max-width:760px) {
  .map { min-width:0; height:660px; }
  .flow-connectors { display:none; }
  .flow-mobile { display:block; }
  .lane { display:none; }
  .map .system { width:42%; height:140px; padding:12px; }
  .map .shopify { left:29%; top:50px; }
  .map .erp { left:29%; top:260px; }
  .map .pakk { left:5%; top:500px; }
  .map .psi { left:53%; top:500px; }
  .map .a { left:53%; top:210px; width:43%; }
  .map .b { left:2%; top:411px; width:43%; }
  .map .c { left:55%; top:411px; width:43%; }
}

.flow-mobile .route { marker-end:url(#flow-arrow-mobile); }
.map[data-view="backward"] .flow-mobile .route,.map[data-view="inventory"] .flow-mobile .route { marker-end:none; marker-start:url(#flow-arrow-mobile); }
.map[data-view="inventory"] .flow-mobile .route-order { marker-start:none; }
@media (min-width:761px) and (max-width:1450px) {
  .layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .layout > .simulator { grid-column:1 / -1; grid-row:1; }
  .layout > .side { grid-column:auto; display:grid; grid-template-columns:1fr; }
}