/* WestLat Connect Service console.
   Palette lifted verbatim from the app so the two read as one product. */

:root {
  --bg-app: #000000;
  --bg-card: #0d0d0d;
  --bg-input: #111111;
  --border: #1a1a1a;
  --border-sub: #1e1e1e;
  --text-primary: #ffffff;
  --text-sec: #888888;
  --text-muted: #555555;
  --text-dim: #444444;
  --accent: #f5c400;
  --accent-subtle: #f5c40022;
  --accent-border: #f5c40033;
  --data: #00d4ff;
  --success: #00e676;
  --warning: #ffab40;
  --error: #ff5252;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  overflow: hidden;
}

.mono, .mono * { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.eyebrow {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
}

/* ── login ────────────────────────────────────────────────────────────── */

.login-body { display: grid; place-items: center; }
.login {
  width: 320px; padding: 32px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; gap: 14px;
}
.login .wordmark { width: 150px; height: auto; }
.login label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-sec); }
.login input {
  background: var(--bg-input); border: 1px solid var(--border-sub); border-radius: 6px;
  padding: 10px; color: var(--text-primary); font-size: 14px;
}
.login input:focus { outline: none; border-color: var(--accent-border); }
.login button {
  background: var(--accent); color: #000; border: 0; border-radius: 6px;
  padding: 11px; font-weight: 700; font-size: 14px; cursor: pointer;
}
.login .err { color: var(--error); font-size: 12px; margin: 0; }
.login .fine { color: var(--text-dim); font-size: 11px; margin: 0; line-height: 1.5; }

/* ── frame ────────────────────────────────────────────────────────────── */

#app { display: flex; flex-direction: column; height: 100%; }

header {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; border-bottom: 1px solid var(--border); flex: none;
}
header .wordmark { height: 20px; width: auto; }
header .sep { flex: 1; }
header .chip {
  font-family: ui-monospace, monospace; font-size: 12px; color: var(--data);
  background: #00d4ff11; border: 1px solid #00d4ff22; border-radius: 5px; padding: 4px 9px;
}
header .meta { font-size: 11px; color: var(--text-muted); }
header button.link {
  background: none; border: 0; color: var(--text-sec); font-size: 12px; cursor: pointer;
}
header button.link:hover { color: var(--accent); }

main { flex: 1; display: flex; min-height: 0; }

/* ── canvas ───────────────────────────────────────────────────────────── */

#canvasWrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.toolbar {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-bottom: 1px solid var(--border); flex: none;
}
.toolbar input {
  background: var(--bg-input); border: 1px solid var(--border-sub); border-radius: 6px;
  padding: 7px 10px; color: var(--text-primary); font-size: 13px; width: 200px;
}
.toolbar input:focus { outline: none; border-color: var(--accent-border); }
.toolbar button {
  background: var(--accent-subtle); border: 1px solid var(--accent-border); color: var(--accent);
  border-radius: 6px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.toolbar button:hover { background: #f5c40033; }
.toolbar .hint { color: var(--text-muted); font-size: 12px; }

#canvas {
  position: relative; flex: 1; overflow: hidden;
  background-image: radial-gradient(circle, #141414 1px, transparent 1px);
  background-size: 26px 26px;
}

#wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#wires path.wire { pointer-events: stroke; cursor: pointer; fill: none; stroke-width: 2; }
#wires path.hit { pointer-events: stroke; cursor: pointer; fill: none; stroke: transparent; stroke-width: 16; }
#wires path.live  { stroke: var(--data); stroke-dasharray: 7 6; animation: flow 0.7s linear infinite; }
#wires path.stale { stroke: var(--warning); stroke-dasharray: 3 7; }
#wires path.waiting { stroke: var(--text-dim); stroke-dasharray: 2 8; }
#wires path.down  { stroke: #2a2a2a; stroke-dasharray: 2 6; }
#wires path.drawing { stroke: var(--accent); stroke-dasharray: 5 5; }
@keyframes flow { to { stroke-dashoffset: -13; } }

.node {
  position: absolute; width: 208px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px 10px;
  cursor: grab; user-select: none; touch-action: none;
}
.node.dragging { cursor: grabbing; z-index: 30; }
.node.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-border); }
.node.live  { border-color: #00e67655; }
.node.stale { border-color: var(--warning); }
.node.waiting { border-color: var(--text-dim); }
.node.down  { border-color: #ff525244; }

.node .jobtag {
  font-family: ui-monospace, monospace; font-size: 10px; color: var(--accent);
  letter-spacing: 0.04em; margin-top: 1px;
}
.node .top { display: flex; align-items: center; gap: 7px; }
.node .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-dim); }
.node.live  .dot { background: var(--success); box-shadow: 0 0 8px #00e67699; }
.node.stale .dot { background: var(--warning); box-shadow: 0 0 8px #ffab4099; animation: blink 1.1s steps(1) infinite; }
.node.waiting .dot { background: var(--text-dim); animation: blink 1.6s steps(1) infinite; }
.node.down  .dot { background: var(--error); }
.node.idle  .dot { background: var(--text-dim); }
@keyframes blink { 50% { opacity: 0.25; } }

.node .name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node .role { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 5px; }
.node .head { font-size: 12px; margin-top: 7px; color: var(--text-sec); line-height: 1.35; }
.node.live  .head { color: var(--success); }
.node.stale .head { color: var(--warning); }
.node.waiting .head { color: var(--text-dim); }
.node.down  .head { color: var(--error); }
.node .age {
  font-family: ui-monospace, monospace; font-size: 19px; margin-top: 6px; color: var(--data);
  display: flex; align-items: baseline; gap: 5px;
}
.node.stale .age { color: var(--warning); }
.node .age small { font-size: 10px; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; }

.node .handle {
  position: absolute; right: -9px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-input); border: 1px solid var(--accent-border);
  cursor: crosshair; display: grid; place-items: center;
}
.node .handle::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.node .handle:hover { background: var(--accent-subtle); }

.empty {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  color: var(--text-muted); font-size: 13px; line-height: 1.7; pointer-events: none;
}
.empty b { color: var(--text-sec); font-weight: 600; }

/* ── activity strip ───────────────────────────────────────────────────── */

#log {
  flex: none; border-top: 1px solid var(--border); padding: 8px 14px 10px;
  height: 132px; overflow: hidden; background: #060606;
}
#log #logNote { color: var(--text-dim); letter-spacing: 0; text-transform: none; font-weight: 400; margin-left: 8px; }
#log .rows { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
#log .row { font-family: ui-monospace, monospace; font-size: 11px; display: flex; gap: 9px; white-space: nowrap; }
#log .row .t { color: var(--text-dim); }
#log .row .d { color: var(--accent); min-width: 110px; overflow: hidden; text-overflow: ellipsis; }
#log .row .m { color: var(--text-sec); overflow: hidden; text-overflow: ellipsis; }
#log .row.warn .m { color: var(--warning); }
#log .row.error .m { color: var(--error); }

/* ── inspector ────────────────────────────────────────────────────────── */

#panel {
  width: 344px; flex: none; border-left: 1px solid var(--border);
  padding: 14px; overflow-y: auto; background: #070707;
}
#panel h2 { font-size: 16px; margin: 6px 0 2px; }
#panel .sub { font-size: 11px; color: var(--text-muted); font-family: ui-monospace, monospace; }
#panel .status { margin-top: 12px; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); }
#panel .status.live  { border-color: #00e67644; }
#panel .status.stale { border-color: var(--warning); }
#panel .status.waiting { border-color: var(--text-dim); }
#panel .status.down  { border-color: #ff525244; }
#panel .pwrow { display: flex; gap: 6px; margin-top: 6px; }
#panel .pwrow input {
  flex: 1; min-width: 0; background: var(--bg-input); border: 1px solid var(--border-sub);
  border-radius: 6px; padding: 6px 8px; color: var(--text-primary);
  font-family: ui-monospace, monospace; font-size: 13px;
}
#panel .pwrow input:focus { outline: none; border-color: var(--accent-border); }
#panel .pwrow button {
  background: var(--accent-subtle); border: 1px solid var(--accent-border); color: var(--accent);
  border-radius: 6px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
#panel .n.bad { color: var(--error); }
#panel .status .h { font-weight: 600; font-size: 13px; }
#panel .status.live  .h { color: var(--success); }
#panel .status.stale .h { color: var(--warning); }
#panel .status.waiting .h { color: var(--text-dim); }
#panel .status.down  .h { color: var(--error); }
#panel .status .d { font-size: 12px; color: var(--text-sec); margin-top: 5px; line-height: 1.5; }

.tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; margin-top: 10px; }
.tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 7px; padding: 8px; }
.tile .k { font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); }
.tile .v { font-family: ui-monospace, monospace; font-size: 15px; margin-top: 3px; color: var(--data); }
.tile .v.warn { color: var(--warning); }
.tile .v.dim { color: var(--text-dim); }

#panel section { margin-top: 16px; }
#panel section > .eyebrow { margin-bottom: 7px; }
#panel table { width: 100%; border-collapse: collapse; font-family: ui-monospace, monospace; font-size: 11px; }
#panel table td { padding: 3px 0; color: var(--text-sec); }
#panel table td.n { color: var(--text-primary); width: 46px; }
#panel table td.r { text-align: right; color: var(--data); }

.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.card .t { font-size: 12px; font-weight: 600; }
.card .n { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.card .kv { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 12px; }
.card .kv span:first-child { color: var(--text-muted); }
.card .kv span:last-child { color: var(--accent); }
.card .kv span.mono { font-family: ui-monospace, monospace; }

#panel .danger {
  margin-top: 18px; width: 100%; background: none; border: 1px solid #ff525233;
  color: var(--error); border-radius: 6px; padding: 8px; font-size: 12px; cursor: pointer;
}
#panel .danger:hover { background: #ff52521a; }
#panel .placeholder { color: var(--text-muted); font-size: 12px; line-height: 1.7; margin-top: 40px; text-align: center; }
#panel .warnbar {
  margin-top: 12px; font-size: 11px; color: var(--warning); background: #ffab401a;
  border: 1px solid #ffab4033; border-radius: 6px; padding: 8px; line-height: 1.5;
}


/* ── job codes ─────────────────────────────────────────────────────────── */

#jobs { flex: none; border-top: 1px solid var(--border); padding: 8px 14px 10px; background: #080808; }
#jobs #jobsNote { color: var(--text-dim); letter-spacing: 0; text-transform: none; font-weight: 400; margin-left: 8px; }
.jobbar { display: flex; gap: 6px; margin: 7px 0; flex-wrap: wrap; }
.jobbar input, .jobbar select {
  background: var(--bg-input); border: 1px solid var(--border-sub); border-radius: 6px;
  padding: 6px 9px; color: var(--text-primary); font-size: 13px;
}
.jobbar input { flex: 1; min-width: 160px; }
.jobbar button {
  background: var(--accent-subtle); border: 1px solid var(--accent-border); color: var(--accent);
  border-radius: 6px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.job { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid #161616; flex-wrap: wrap; }
/* The code is read aloud across a truck cab. It is the biggest thing here on purpose. */
.job .code {
  font-family: ui-monospace, monospace; font-size: 19px; letter-spacing: 0.06em;
  color: var(--accent); font-weight: 700;
}
.job .jname { font-size: 13px; color: var(--text-primary); }
.job .seats { font-size: 11px; color: var(--text-sec); font-family: ui-monospace, monospace; }
.job .seats.full { color: var(--warning); }
.job .who { font-size: 11px; color: var(--text-dim); }
.job .dead { color: var(--error); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.job button {
  background: transparent; border: 1px solid var(--border-sub); color: var(--text-sec);
  border-radius: 5px; padding: 4px 9px; font-size: 11px; cursor: pointer;
}
.job button.danger { border-color: #ff525255; color: var(--error); }

/* ── mobile ───────────────────────────────────────────────────────────────
   The canvas is a drag-and-drop diagram: absolutely positioned nodes at
   remembered coordinates, joined by SVG wires. That is a desk tool and it does
   not survive a phone — 208px nodes on a 360px screen, laid out for a viewport
   three times as wide, with the inspector taking half of what is left.

   Asked for on 2026-08-15: log in from a phone and SEE WHAT IS GOING ON. So on a
   narrow screen the diagram stops being a diagram and becomes a list. The nodes
   flow instead of floating, the wires go (they cannot mean anything without the
   positions), and the inspector moves below rather than beside. Reading works;
   rearranging is left to the desk, which is where anyone rearranges anyway. */
@media (max-width: 820px) {
  main { flex-direction: column; }

  #canvasWrap { flex: none; }
  #canvas {
    overflow: visible; height: auto; flex: none;
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px; background-image: none;
  }
  /* Static, not absolute: let them stack in document order at full width. */
  .node { position: static !important; left: auto !important; top: auto !important; width: auto; }
  .node .handle { display: none; }   /* nothing to drag a wire to in a list */
  #wires { display: none; }
  .empty { position: static; padding: 24px 12px; }

  #panel {
    width: auto; border-left: none; border-top: 1px solid var(--border);
    max-height: none; overflow-y: visible;
  }

  #jobs .jobbar input, #jobs .jobbar select { width: 100%; flex: none; }
  #log { height: auto; max-height: 190px; overflow-y: auto; }
  #log .row { white-space: normal; }
  #log .row .d { min-width: 0; }

  .toolbar { flex-wrap: wrap; }
  .toolbar input { width: 100%; }
  .toolbar .hint { display: none; }   /* it describes dragging */

  header { flex-wrap: wrap; gap: 8px; }
}