/* Signal Line (/labs/signal-line).
   Part of the /labs stylesheet, split out of one 3,400-line labs.css.

   THE NUMBER IN THE FILENAME IS LOAD-BEARING. stylesheet_link_tag :app
   collects every stylesheet under app/assets and serves them sorted by
   path, so the ordinal prefix is the only thing holding the cascade order
   these rules were written in — and several classes are shared across labs
   (.lp-head, .lab-entry, .lab-block, .dt-table). Renaming a file without
   renumbering it, or inserting one out of sequence, reorders the cascade
   silently.

   Nothing in this comment may contain the two characters that close a CSS
   comment. The first version of it wrote a shell glob here, which closed
   the comment early; the leaked text then parsed as a selector and ate the
   first real rule in all nine files. There is a test for that now.
   ============================================================ */

/* ============================================================
   Signal Line (/labs/signal-line) — MCP server landing page.
   Reuses .lab-entry/.lab-block/.eyebrow for the page's section
   rhythm and .dt-table for the recent-calls feed; only genuinely
   new components (cards, video placeholder, connect block) get
   their own .sl- classes.
   ============================================================ */

/* ---- tool/resource/prompt cards ---- */
.sl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 4px;
  border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
}
.sl-card {
  background: var(--bg);
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sl-card-kind {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sl-card-name {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.sl-card .sl-card-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: none;
  min-height: calc(1.55em * 3);   /* fixed reservation (not flex-grow) so .sl-card-foot starts at the same Y on every card, independent of row-stretch from taller siblings */
}
.sl-card-uri {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
  word-break: break-all;
}
/* Anchors params/URI/empty-state to a common baseline across cards in the same
   grid row, regardless of how much description text sits above it. */
.sl-card-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.sl-params { display: flex; flex-direction: column; gap: 10px; }
.sl-param {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  padding-top: 10px;
}
.sl-param:first-child { padding-top: 0; }
.sl-param + .sl-param { border-top: 1px solid var(--line-soft); }
.sl-param-head {
  display: grid;
  grid-template-columns: minmax(88px, auto) minmax(56px, auto) auto;
  align-items: baseline;
  column-gap: 10px;
}
.sl-param-name {
  font-family: var(--font-mono);
  color: var(--ink);
  font-size: 12.5px;
}
.sl-param-type {
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sl-param-req {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1px 6px;
  justify-self: start;
}
.sl-param-enum,
.sl-param-desc {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-muted);
}
.sl-param-none {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
}
.sl-empty {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-faint);
  font-style: italic;
}

/* ---- connection block ---- */
.sl-connect {
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.sl-connect-row {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.sl-connect-row + .sl-connect-row { border-top: 1px solid var(--line-soft); }
.sl-connect-label {
  flex: 0 0 84px;
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 2px;
}
.sl-connect-row code {
  color: var(--ink);
  word-break: break-all;
}
.sl-code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink);
  background: #FAFAFA;
  border: 1px solid var(--line-soft);
  padding: 16px 18px;
  margin-top: 12px;
  overflow-x: auto;
  white-space: pre;
}
.sl-demo-token {
  border: 1px solid var(--line);
  padding: 16px 18px;
}
.sl-demo-token p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: none;
}
.lab-block p.sl-auth-note {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: none;
}

/* ---- recent-calls feed ---- */
.sl-feed-scroll { max-height: 50vh; }
/* The recent-calls feed renders tool-call arguments — the same thing the Proving
   Ground's bout transcript shows — so it reuses .pg-chat-action-json (and the shared
   .pg-json-key/.pg-json-string colouring) rather than defining a second JSON block
   that would then have to be kept in visual sync. Restyle that one, and this follows.
   Only the context differs: there's no right-aligned chat bubble to hang off here, so
   drop the shrink-to-fit and the chat margins, and hold the table column to a fixed
   width instead. */
.sl-feed-json {
  display: block;
  width: 320px;
  margin: 0;
}
@media (max-width: 680px) {
  .sl-feed-json { width: 220px; }
}