/* obs-attend.css — the second wire. Scoped under .obs-attend; tokens from observatory.css, no new colours. */
.obs-attend .lede { margin: 14px 0 6px; font-size: 14px; color: var(--ink); font-weight: 500; }
.obs-attend .numbers p { margin: 0 0 4px; }
.attend-form { margin: 0 0 8px; }
.attend-form input { flex: 1 1 320px; }
.attend-presets { margin: 0 0 10px; }
.attend-presets button { padding: 5px 10px; font-size: 13px; color: var(--muted); }
.attend-presets button:hover { color: var(--ink); }
.attend-tools { margin: 0 0 10px; gap: 8px 18px; }
.attend-layer { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--muted); min-width: 0; }
.attend-layer input { width: 150px; }
.attend-layerval { font-family: var(--font-num); color: var(--gold); font-size: 13px; }
.attend-status { margin: 0; flex: 1 1 240px; font-size: 14px; color: var(--muted); min-height: 1.5em; overflow-wrap: anywhere; }
.attend-status.err { color: var(--orange); }
.attend-stage { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px 24px; align-items: start; }
.attend-piccol { min-width: 0; }

/* the picture: an SVG as wide as the tokens need, in a strip that scrolls sideways when the text is long */
.attend-scroll { overflow-x: auto; overflow-y: hidden; background: var(--space, #04060a); border: 1px solid var(--line); border-radius: var(--radius-s); -webkit-overflow-scrolling: touch; }
.attend-pic { display: block; font-family: var(--font-ui); min-width: 100%; }
.attend-pic .rail { stroke: var(--line2); stroke-width: 1; }
.attend-pic .arc { fill: none; stroke: var(--aqua); stroke-linecap: round; transition: stroke-opacity 150ms; }
.attend-pic .arc.self { stroke: var(--lilac); }
.attend-pic .arc.off { stroke-opacity: 0.05 !important; }
.attend-pic .arc.on { stroke: var(--gold); }
.attend-pic .arrowhead { fill: var(--aqua); fill-opacity: 0.8; }
.attend-pic .wt { fill: var(--ink); font-size: 10.5px; font-family: var(--font-num); paint-order: stroke; stroke: var(--night); stroke-width: 3px; stroke-linejoin: round; }
.attend-pic .tok { cursor: pointer; outline: none; }
.attend-pic .tok .hit { fill: var(--panel2); stroke: var(--line); stroke-width: 1; transition: stroke 150ms, fill 150ms; }
.attend-pic .tok text, .attend-pic text.tok { fill: var(--ink); font-size: 13px; font-weight: 500; pointer-events: none; }
.attend-pic .tok.lit .hit, .attend-pic .tok:focus-visible .hit { stroke: var(--gold); }
.attend-pic .tok.lit text { fill: var(--gold); }
.attend-pic .tok.pin .hit { fill: var(--line); }
.attend-pic .exp { fill: var(--faint); font-size: 10.5px; }
.attend-pic.small text.tok, .attend-pic.small .tok text { font-size: 12px; }
.attend-pic.small .exp { font-size: 10px; }
.attend-pic .exp.same { fill: var(--green); }
.attend-pic .pbar { fill: var(--aqua); fill-opacity: 0.85; }
.attend-pic .pnum { fill: var(--muted); font-size: 9.5px; font-family: var(--font-num); }
.attend-pic .axis { fill: var(--faint); font-size: 9.5px; font-style: italic; font-family: var(--font-read); }
.attend-caption { margin: 8px 0 0; font-size: 13px; }
.attend-read { margin: 4px 0 0; min-height: 3em; font-size: 13.5px; line-height: 1.55; color: var(--muted); overflow-wrap: anywhere; }
.attend-read b { color: var(--gold); font-weight: 500; }
.attend-read .num { color: var(--ink); }
.attend-expline { display: block; margin-top: 2px; }

/* the ten next tokens */
.attend-next { min-width: 0; }
.attend-next .lede { margin-top: 0; }
.attend-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.attend-bars li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 52px; align-items: center; gap: 8px; }
.attend-bars .tok { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attend-bars li.first .tok { color: var(--gold); }
.attend-bars .track { display: block; height: 10px; background: var(--panel2); border-radius: 3px; overflow: hidden; }
.attend-bars .track i { display: block; height: 100%; background: var(--aqua); border-radius: 3px; }
.attend-bars .num { color: var(--muted); font-size: 12px; text-align: right; }
.attend-next .note { margin: 8px 0 0; }
.attend-next .note .num { color: var(--ink); }

/* which comes first: both orders of each pair, as two bars from one centre */
.attend-succrows { display: grid; gap: 6px; margin: 4px 0 0; }
.attend-succrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 160px) minmax(60px, 160px) minmax(0, 1fr); align-items: center; gap: 0 10px; font-size: 13px; color: var(--muted); }
.attend-succrow .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attend-succrow .lbl:first-child { text-align: right; }
.attend-succrow .pre { color: var(--faint); }
.attend-succrow b { color: var(--ink); font-weight: 500; }
.attend-succrow .num { color: var(--ink); font-size: 12px; }
.attend-succrow .track { display: block; height: 12px; background: var(--panel2); overflow: hidden; }
.attend-succrow .track i { display: block; height: 100%; background: var(--aqua); }
.attend-succrow .track.l { border-radius: 3px 0 0 3px; border-right: 1px solid var(--line2); }
.attend-succrow .track.l i { margin-left: auto; }
.attend-succrow .track.r { border-radius: 0 3px 3px 0; }
.attend-succ .note { margin: 10px 0 0; }
.obs-attend.rm .attend-pic .arc, .obs-attend.rm .attend-pic .tok .hit { transition: none; }

@media (max-width: 860px) {
  .attend-stage { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .attend-layer { width: 100%; }
  .attend-layer input { width: 140px; }
  .attend-layerval { flex-basis: 100%; }   /* the layer reading takes its own line */
  .attend-presets button { font-size: 12.5px; padding: 5px 8px; }
  /* narrow: each order on its own line, label then bar, both bars growing from the left */
  .attend-succrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2px 8px; font-size: 12.5px; }
  .attend-succrow .lbl { white-space: normal; overflow: visible; text-align: left; }
  .attend-succrow .lbl:first-child { text-align: left; }
  .attend-succrow .lbl:last-child { order: 3; }
  .attend-succrow .track.r { order: 4; border-radius: 3px; }
  .attend-succrow .track.l { border-radius: 3px; border-right: none; }
  .attend-succrow .track.l i { margin-left: 0; }
  .attend-succrows { gap: 10px; }
  .attend-bars li { grid-template-columns: 80px minmax(0, 1fr) 48px; }
}