/* ==========================================================================
   Decision-rights lanes (tools/exhibit_lanes.py), from the GateLanes design.
   Builds on the shared slide classes in house.css (ex-sl-*); the switch
   between the slide and its stacked version is in matrix.css. The ochre and
   the teal are the site's (--gold-line, --graphic); the other colours are the
   design's own, for the dark ground of the locked Noir direction.
   ========================================================================== */

.ex-ln {
  --ln-band: rgba(255, 255, 255, 0.03);
  --ln-band-line: #22404b;
  --ln-arrow: #6f8b95;
  --ln-bar: #5e7c87;
}

/* --- Shapes ---------------------------------------------------------------- */
.ex-ln-band {
  fill: var(--ln-band);
  stroke: var(--ln-band-line);
  stroke-width: 1;
}

.ex-ln-arrow {
  fill: none;
  stroke: var(--ln-arrow);
  stroke-width: 2;
  stroke-linecap: round;
}

.ex-ln-arrowhead {
  fill: var(--ln-arrow);
}

.ex-ln-diamond {
  fill: none;
  stroke: var(--gold-line);
  stroke-width: 1.5;
}

/* A role card where the lane decides: a gold wash inside a gold border. */
.ex-ln-decides {
  fill: var(--gold-line);
  fill-opacity: 0.08;
  stroke: var(--gold-line);
  stroke-width: 1.5;
}

.ex-ln-pill {
  stroke-width: 1;
  stroke-opacity: 0.6;
}

.ex-ln-pill--teal {
  fill: var(--graphic);
  fill-opacity: 0.12;
  stroke: var(--graphic);
}

.ex-ln-pill--gold {
  fill: var(--gold-line);
  fill-opacity: 0.1;
  stroke: var(--gold-line);
}

.ex-ln-bar { fill: var(--ln-bar); }
.ex-ln-bar--last { fill: var(--gold-line); }

.ex-ln-handover {
  fill: none;
  stroke: var(--gold-line);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  stroke-linecap: round;
}

.ex-ln-handover--key {
  stroke-linecap: butt;
}

.ex-ln-handover-pill {
  fill: var(--plate);   /* the frame's ground: masks the dashed line as the design's background does */
  stroke: var(--gold-line);
  stroke-width: 1;
}

/* --- Role badges: drawn on the design's 28-unit grid ------------------------ */
.ex-ln-badge text {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
}

.ex-ln-badge--decides rect { fill: var(--gold-line); }
.ex-ln-badge--decides text { fill: var(--sl-ink); }

.ex-ln-badge--advises rect {
  fill: none;
  stroke: var(--sl-muted);
  stroke-width: 1.5;
}

.ex-ln-badge--advises text { fill: var(--sl-steel); }

.ex-ln-badge--input rect {
  fill: none;
  stroke: var(--sl-faint);
  stroke-width: 1.25;
  stroke-dasharray: 3 3;
}

.ex-ln-badge--input text { fill: var(--sl-muted); }

/* The legend's keys: the same badges at 16, with the design's heavier strokes. */
.ex-ln-badge--key text { font-size: 13px; }
.ex-ln-badge--key rect { stroke-width: 2; }
.ex-ln-badge--key.ex-ln-badge--input rect { stroke-dasharray: 4 4; }

/* --- Type ------------------------------------------------------------------ */
.ex-ln-q,
.ex-ln-text,
.ex-ln-lane,
.ex-ln-lane-sub,
.ex-ln-row,
.ex-ln-pill-text,
.ex-ln-key {
  font-family: var(--font-body);
}

.ex-ln-q {
  font-size: 12px;
  font-weight: 400;
  fill: var(--sl-muted);
}

.ex-ln-text {
  font-size: 12px;
  font-weight: 400;
  fill: var(--sl-fg);
}

.ex-ln-lane {
  font-size: 14px;
  font-weight: 600;
  fill: var(--sl-fg);
}

.ex-ln-lane-sub {
  font-size: 11px;
  font-weight: 400;
  fill: var(--sl-muted);
}

.ex-ln-row {
  font-size: 13px;
  font-weight: 600;
  fill: var(--sl-steel);
}

.ex-ln-pill-text {
  font-size: 12px;
  font-weight: 600;
  fill: var(--sl-fg);
}

.ex-ln-key {
  font-size: 12px;
  font-weight: 400;
  fill: var(--sl-muted);
}