/* Causeway's stylesheet: the drawing, its boxes, wires and labels, and the written-out list.
 *
 * Every colour is a custom property on `.cw`, and a host sets them from its own palette, once, on `.cw`
 * or on anything above it. A host with two themes maps each property onto a token that already flips
 * with its theme, so nothing here knows how many themes there are. The values below are a light theme's,
 * for a host that maps none. Nothing here loads anything: no font, no image, no import.
 *
 * Every class this package writes is `cw-*`, and every state is a class too (`cw--narrow`), so a host
 * can reach any part of the drawing from its own sheet without an id or a style attribute.
 */

.cw {
  --cw-ink: #0e1320;
  --cw-ink-2: #4b5263;
  --cw-ink-3: #616879;
  --cw-surface: #ffffff;
  --cw-ground: #f7f8fb;
  --cw-line: #e6e8ee;
  --cw-edge: #616879;
  --cw-accent: #2a33c4;
  --cw-accent-ink: #1a1f6b;
  --cw-accent-soft: #eceeff;
  --cw-ok: #1f9d55;
  --cw-ok-ink: #146b3a;
  --cw-ok-soft: #def7e9;
  --cw-warn: #c77800;
  --cw-warn-ink: #8c5600;
  --cw-warn-soft: #fdf1dc;
  --cw-danger: #dc2c50;
  --cw-danger-ink: #b3243f;
  --cw-danger-soft: #fde7ec;
  --cw-quiet: #b7bcc8;
  --cw-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --cw-radius: 12px;
  --cw-label-max: 200px;

  position: relative;
  color: var(--cw-ink);
}

/* ── the drawing ───────────────────────────────────────────────────────── */

.cw-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cw-line);
  border-radius: calc(var(--cw-radius) + 4px);
  background: var(--cw-ground);
}

.cw-canvas {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

.cw-edges {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}

.cw-edge {
  fill: none;
  stroke: var(--cw-edge);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cw-edge--dashed {
  stroke-dasharray: 5 4;
}

.cw-node {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius);
  background: var(--cw-surface);
  font: inherit;
  text-align: left;
}

/* A tone is a bar down the box's leading edge, so the name keeps the ink it is read in. */
.cw-node--accent { box-shadow: inset 3px 0 0 var(--cw-accent); }
.cw-node--ok { box-shadow: inset 3px 0 0 var(--cw-ok); }
.cw-node--warn { box-shadow: inset 3px 0 0 var(--cw-warn); }
.cw-node--danger { box-shadow: inset 3px 0 0 var(--cw-danger); }
.cw-node--quiet { box-shadow: inset 3px 0 0 var(--cw-quiet); }

.cw-node--terminal {
  min-height: 44px;
  border-radius: 999px;
  padding: 8px 18px;
  background: var(--cw-ground);
  align-items: center;
  text-align: center;
}

.cw-node--hub {
  min-height: 64px;
  padding: 12px 16px 12px 18px;
}

.cw-node-role {
  font-family: var(--cw-mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cw-ink-3);
}

.cw-node-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--cw-ink);
  overflow-wrap: anywhere;
}

.cw-node--hub .cw-node-name {
  font-size: 16px;
}

.cw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.cw-chip {
  box-sizing: border-box;
  max-width: 100%;
  padding: 0 6px;
  border: 1px solid var(--cw-line);
  border-radius: 6px;
  background: var(--cw-ground);
  color: var(--cw-ink-2);
  font-size: 11px;
  line-height: 16px;
  overflow-wrap: anywhere;
}

.cw-chip--accent { border-color: transparent; background: var(--cw-accent-soft); color: var(--cw-accent-ink); }
.cw-chip--ok { border-color: transparent; background: var(--cw-ok-soft); color: var(--cw-ok-ink); }
.cw-chip--warn { border-color: transparent; background: var(--cw-warn-soft); color: var(--cw-warn-ink); }
.cw-chip--danger { border-color: transparent; background: var(--cw-danger-soft); color: var(--cw-danger-ink); }
.cw-chip--quiet { color: var(--cw-ink-3); }

/* A port is where a wire meets a box: on its leading and trailing edges in a flow, on its top in a
 * socket's column, and on the hub's foot for each socket. */
.cw-port {
  position: absolute;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--cw-edge);
  border-radius: 50%;
  background: var(--cw-surface);
}

.cw-port--in,
.cw-port--out {
  top: 50%;
  margin-top: -5px;
}

.cw-port--in { left: -5px; }
.cw-port--out { right: -5px; }

.cw-port--top {
  top: -5px;
  left: 50%;
  margin-left: -5px;
}

.cw-label {
  position: absolute;
  box-sizing: border-box;
  max-width: var(--cw-label-max);
  padding: 2px 8px;
  border: 1px solid var(--cw-line);
  border-radius: 8px;
  background: var(--cw-accent-soft);
  color: var(--cw-accent-ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cw-socket {
  position: absolute;
  box-sizing: border-box;
  white-space: nowrap;
  padding: 1px 8px;
  border: 1px solid var(--cw-line);
  border-radius: 999px;
  background: var(--cw-surface);
  color: var(--cw-ink-2);
  font-family: var(--cw-mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cw-empty {
  position: absolute;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px dashed var(--cw-line);
  border-radius: var(--cw-radius);
  background: var(--cw-surface);
  color: var(--cw-ink-3);
  font-size: 12.5px;
  line-height: 1.4;
  text-align: center;
}

/* ── compact: a drawing that does not fit at its own lengths ───────────────
 * The renderer lays it out again at the layout's COMPACT lengths before it scales it; these are the
 * same step, in type. */

.cw--compact {
  --cw-label-max: 150px;
}

.cw--compact .cw-node {
  padding: 8px 10px 8px 12px;
}

.cw--compact .cw-node-name {
  font-size: 13px;
}

.cw--compact .cw-label {
  font-size: 11.5px;
}

/* ── the written-out list ──────────────────────────────────────────────── */

.cw-list {
  margin: 0;
  padding: 0 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--cw-ink);
  font-size: 14px;
  line-height: 1.5;
}

.cw-list--sockets {
  list-style: none;
  padding-left: 0;
}

.cw-frame + .cw-list {
  margin-top: 16px;
}

.cw-list-links,
.cw-list-parts {
  margin: 4px 0 0;
  padding: 0 0 0 4px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cw-list-role,
.cw-list-socket {
  font-family: var(--cw-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cw-ink-3);
}

.cw-list-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.cw-list-sub {
  color: var(--cw-ink-2);
  overflow-wrap: anywhere;
}

.cw-list-sub .cw-list-name {
  color: var(--cw-ink);
}

.cw-list-arrow {
  color: var(--cw-ink-3);
}

.cw-list-chip {
  font-size: 12px;
  color: var(--cw-ink-2);
}

.cw-list-chip--ok { color: var(--cw-ok-ink); }
.cw-list-chip--warn { color: var(--cw-warn-ink); }
.cw-list-chip--danger { color: var(--cw-danger-ink); }
.cw-list-chip--accent { color: var(--cw-accent-ink); }

.cw-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── when the drawing gives way ───────────────────────────────────────────
 * Too narrow to read, the drawing is not drawn, and a list in `fallback` mode, read only by a screen
 * reader beside the drawing, comes onto the screen in its place. */

.cw--narrow .cw-frame {
  display: none;
}

.cw--list-fallback:not(.cw--narrow) .cw-list {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}