/* static/stackinfo/stack-info.css - NEW FILE (2026-10-05, phase 6 of 6,
   batch 6a-ii).

   WHY THE BOX MOVED OUT OF index.html. Two reasons, and the first is a bug
   report rather than tidiness: the readout is `position: fixed` bottom-left
   and batch 6a put an upload panel in the footer's normal flow, so at narrow
   widths the two overlap. Making it collapsible fixes that, and the collapse
   logic plus the new RAG section is ~250 lines that index.html does not need
   to carry - the same split static/rag/ already has.

   NO HEX COLOURS. Every value is a brand.css token, so dark mode is free.

   =========================================================================
   `pointer-events` IS LOAD-BEARING HERE AND MUST NOT BE SIMPLIFIED
   =========================================================================
   index.html's original rule set `pointer-events: none` on the whole box with
   the comment: "it must never intercept clicks meant for the composer behind
   it". That is still true and still the default. The toggle button and the
   links opt back in individually with `pointer-events: auto`, exactly as the
   `reference` link already did. A blanket `auto` on the container would make
   an invisible rectangle over the bottom-left of the composer. */

#stack-info {
  position: fixed;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--muted);
  opacity: 0.88;
  pointer-events: none;          /* see the header comment - do not change */
  max-width: min(26rem, calc(100vw - 1.5rem));
}

#stack-info strong { color: var(--ink); font-weight: 500; }

/* Anything clickable opts back in, one by one. */
#stack-info a,
#stack-info button,
#stack-info .si-copy { pointer-events: auto; }

#stack-info a { color: var(--accent); }

/* ---------------------------------------------------------------------------
   THE HEADER ROW. Always visible, and it is the whole box when collapsed -
   one line, deliberately the three facts worth seeing without asking: which
   stack answered, which instance, which version.
   --------------------------------------------------------------------------- */
.si-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.55rem;
}

.si-toggle {
  font: inherit;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--field);
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.si-toggle:hover { background: var(--accent-soft); }

/* A real focus ring, because this is now a keyboard-reachable control inside
   a box that used to be inert. */
.si-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.si-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   THE BODY. Hidden when collapsed, which is the default.
   --------------------------------------------------------------------------- */
.si-body {
  padding: 0 0.55rem 0.45rem 0.55rem;
  max-height: min(60vh, 32rem);
  overflow-y: auto;
}

#stack-info[data-open="false"] .si-body { display: none; }

/* Scrolling the body needs pointer events, or the wheel goes to the page
   behind it. Granted only when the box is actually open. */
#stack-info[data-open="true"] .si-body { pointer-events: auto; }

.si-section {
  margin: 0.35rem 0 0 0;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
}

.si-section:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.si-label {
  display: block;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.si-row { display: block; overflow-wrap: anywhere; }

/* The collection name next to the provider that writes it - the pairing that
   explains why a document embedded with one provider is invisible to the
   other. Indented so the relationship reads as nesting. */
.si-sub { display: block; padding-left: 0.7rem; overflow-wrap: anywhere; }

.si-default { color: var(--accent); }

/* ---------------------------------------------------------------------------
   THE SESSION ID. Click to copy, because the reason to look at it is almost
   always to paste it into a psql query or a curl.
   --------------------------------------------------------------------------- */
.si-copy {
  font: inherit;
  border: 1px dashed var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 0 0.2rem;
  overflow-wrap: anywhere;
  text-align: left;
}

.si-copy:hover { background: var(--accent-soft); border-style: solid; }

.si-copied { color: var(--accent); }

/* ---------------------------------------------------------------------------
   THE OBSERVED-TOKEN COUNTER, AND ITS CAVEAT IS PART OF THE DESIGN.
   It counts only what THIS TAB has seen since load. It is not the project's
   recorded total and it resets on reload, so the caveat is rendered with the
   number rather than left to a tooltip - a figure that looks authoritative
   and is not has cost this project real time twice.
   --------------------------------------------------------------------------- */
.si-caveat {
  display: block;
  color: var(--muted);
  opacity: 0.8;
  font-style: normal;
}

@media (max-width: 640px) {
  #stack-info { max-width: calc(100vw - 1.5rem); }
  .si-body { max-height: 40vh; }
}