/* Dispatch = REDEYE blue. Same layout as Terminal, only the accent changes. */
body.dispatch { --acc: #1A8FD1; --accbg: #10283A; --good: #6FD39A; --goodbg: #1E3A2A; --bad: #FF8A8F; --badbg: #3A1519; }
body.dispatch .accentbar { height: 4px; background: var(--acc); position: sticky; top: 0; z-index: 21; }
body.dispatch .topbar { background: linear-gradient(180deg, var(--accbg) 0%, var(--bg) 100%); top: 4px; }
body.dispatch .mark .tag { color: #fff; background: var(--acc); border-radius: 5px; padding: 4px 7px 3px; font-weight: 900; }
body.dispatch .topbar nav a.on { background: var(--accbg); box-shadow: inset 0 -2px 0 var(--acc); }
body.dispatch .btn:not(.ghost):not(.dashed):not(.amber) { background: var(--acc); }
body.dispatch .btn.amber { background: var(--amber); color: var(--bg); }
body.dispatch .switch[aria-checked="true"] { background: var(--acc); }
body.dispatch a { color: #6CC0F0; }
body.dispatch a:hover { color: #9AD6F7; }
body.dispatch :focus-visible { outline-color: color-mix(in srgb, var(--acc) 70%, transparent); }
.appswitch { font-size: 12px; color: var(--muted); text-decoration: none; border: 1px solid var(--line2); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.appswitch:hover { color: var(--ink); border-color: var(--ink); }

.pill.good { background: var(--goodbg); color: var(--good); }
.pill.accent { background: var(--accbg); color: #6CC0F0; }
.pill.bad { background: var(--badbg); color: var(--bad); }
.pill.soft { background: #333; color: var(--ink); }
.pill.amberSoft { background: var(--amberbg); color: var(--amber); }
.box-good { background: var(--goodbg); border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.box-good b { color: var(--good); }
.box-warn { background: var(--amberbg); border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.box-warn b { color: var(--amber); }
.box-bad { background: var(--badbg); border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.box-bad b { color: var(--bad); }
.note { background: var(--amberbg); border-left: 3px solid var(--amber); border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.lock::before { content: "🔒 "; }

/* Pipeline counts */
.pipe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.pipe button { background: var(--surface); border: 1px solid transparent; border-radius: 12px; padding: 14px 16px; text-align: left; color: var(--ink); font: inherit; cursor: pointer; }
.pipe button.hot { border-color: var(--amber); }
.pipe button[aria-pressed="true"] { border-color: var(--acc); background: var(--accbg); }
.pipe .n { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 28px; line-height: 1.1; }
.pipe .l { font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Tables of rows */
.rows { background: var(--surface); border-radius: 14px; overflow: hidden; }
.rows .head, .rows .row { display: grid; gap: 14px; align-items: center; padding: 14px 20px; }
.rows .head { font-size: 11px; font-weight: 900; letter-spacing: .14em; color: var(--muted); padding-top: 12px; padding-bottom: 10px; }
.rows .row { border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.rows a.row:hover { background: #292929; color: var(--ink); }
.rows .empty { padding: 36px 20px; text-align: center; color: var(--muted); border-top: 1px solid var(--line); }
.est-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, .9fr) minmax(0, .8fr) minmax(0, 1.2fr) 190px; }
@media (max-width: 900px) {
  .rows .head { display: none; }
  .est-grid { grid-template-columns: 1fr auto; row-gap: 8px; }
  .est-grid > :nth-child(4) { display: none; }
  .est-grid > :nth-child(5) { grid-column: 1 / -1; text-align: left !important; }
}

/* Stage bar */
.stagebar { display: flex; gap: 8px; min-width: min(640px, 100%); }
.stagebar div { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.stagebar i { height: 5px; border-radius: 3px; background: #444; display: block; }
.stagebar .done i { background: #8CCBEF; }
.stagebar .on i { background: var(--amber); }
.stagebar .on { color: var(--ink); font-weight: 700; }

/* Builder */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1080px) { .layout { grid-template-columns: 1fr; } .side { position: static; } }
.catcard { background: var(--surface); border-radius: 14px; padding: 16px 20px; }
.cathead { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cathead h3 { margin: 0; font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 16px; text-transform: uppercase; }
.line { display: grid; grid-template-columns: minmax(0, 1fr) 200px 110px 110px 36px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.line:first-of-type { border-top: 0; }
.line .nm { font-weight: 700; }
.line .ds { font-size: 12px; color: var(--muted); }
.line .why { font-size: 12px; color: var(--amber); }
.step { display: flex; align-items: center; gap: 6px; }
.step button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line2); background: transparent; color: var(--ink); cursor: pointer; font-size: 16px; line-height: 1; }
.step input { width: 58px; height: 32px; text-align: center; padding: 0 4px; font-weight: 700; }
.step .u { font-size: 12px; color: var(--muted); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.priceIn { height: 32px; font-size: 14px; }
.line .tot { font-weight: 700; text-align: right; }
.more { width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: 18px; }
.more:hover { border-color: var(--line2); color: var(--ink); }
@media (max-width: 760px) {
  .line { grid-template-columns: 1fr auto; }
  .line .priceCell { display: none; }
  .line .step { grid-column: 1; }
}
.picker { position: relative; }
.picker .results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface2); border: 1px solid var(--line2); border-radius: 10px; max-height: 320px; overflow: auto; z-index: 15; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.picker .results button { display: flex; width: 100%; justify-content: space-between; gap: 12px; padding: 10px 14px; background: transparent; border: 0; border-top: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.picker .results button:first-child { border-top: 0; }
.picker .results button:hover, .picker .results button.hi { background: var(--accbg); }
.sugg { background: var(--amberbg); border: 1px solid var(--amber); border-radius: 14px; overflow: hidden; }
.sugg .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; flex-wrap: wrap; }
.sugg .item { display: grid; grid-template-columns: minmax(0, 1fr) 100px 100px auto; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid #4A3E24; }
@media (max-width: 760px) { .sugg .item { grid-template-columns: 1fr auto; } .sugg .item > :nth-child(2), .sugg .item > :nth-child(3) { display: none; } }
.total-big { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 40px; line-height: 1.05; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 3px 0; }
.kv span:first-child { color: var(--muted); }
.menu { position: absolute; right: 0; top: calc(100% + 4px); background: var(--surface2); border: 1px solid var(--line2); border-radius: 10px; min-width: 220px; z-index: 16; box-shadow: 0 12px 30px rgba(0,0,0,.45); overflow: hidden; }
.menu button { display: block; width: 100%; text-align: left; padding: 11px 14px; background: transparent; border: 0; border-top: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.menu button:first-child { border-top: 0; }
.menu button:hover { background: var(--accbg); }
.menu button.danger { color: var(--bad); }
.timeline { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.timeline div { display: flex; gap: 10px; }
.timeline time { color: var(--muted); white-space: nowrap; min-width: 92px; }

/* Start options */
.starts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.starts button { background: var(--surface); border: 1px solid var(--line2); border-radius: 16px; padding: 24px; text-align: left; color: var(--ink); font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 10px; }
.starts button[aria-pressed="true"] { border-color: var(--acc); background: var(--accbg); }
.starts .ic { font-size: 26px; }
.starts .t { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 19px; text-transform: uppercase; }
.starts .d { color: var(--muted); font-size: 14px; }
@media (max-width: 860px) { .starts { grid-template-columns: 1fr; } }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Links are blue in Dispatch, but the brand mark and tabs keep Terminal's colours. */
body.dispatch .mark, body.dispatch .mark:hover { color: var(--ink); }
body.dispatch .topbar nav a { color: var(--muted); }
body.dispatch .topbar nav a.on, body.dispatch .topbar nav a:hover { color: var(--ink); }
body.dispatch .btn, body.dispatch .btn:hover { color: #fff; }
body.dispatch .btn.ghost, body.dispatch .btn.ghost:hover { color: var(--ink); }
body.dispatch .btn.amber, body.dispatch .btn.amber:hover { color: var(--bg); }
body.dispatch .gearbtn { color: var(--muted); }
body.dispatch .appswitch { color: var(--muted); }
body.dispatch .rows a.row, body.dispatch .rows a.row:hover { color: var(--ink); }

@media (max-width: 760px) {
  .stagebar { min-width: 0; width: 100%; }
  .stagebar div { font-size: 10px; }
  .line { grid-template-columns: minmax(0, 1fr) auto; }
  .line .tot { grid-column: 2; grid-row: 1; }
  .line .step { grid-column: 1 / -1; }
  .line .relative { grid-column: 2; grid-row: 2; justify-self: end; }
  .titleIn { font-size: 26px; }
}