/* static/capability/capability-ui.css - NEW FILE (2026-10-14, 12p).

   THE CAPABILITY DASHBOARD: every endpoint, MCP server and tool, skill,
   subagent, hook and usage report this deployment has, with a description for
   each and a mark saying whether THIS account may use it.

   =========================================================================
   WHY IT IS AN OVERLAY AND NOT A CORNER READOUT
   =========================================================================
   static/stackinfo/ and static/userinfo/ are both collapsed chips pinned to a
   bottom corner, and that shape is right for what they hold - a handful of
   facts somebody glances at. This holds ~90 tool names, 27 reports, every
   route in the application and six sections of prose. A chip that expanded to
   that size would cover the composer and the transcript anyway.

   SO THE TWO CORNERS ARE LEFT ALONE and this opens over the page from a
   button in the header, beside "New chat". It is the only one of the three
   that is a DESTINATION rather than a readout - you go to it, read it and
   close it - which is also why it is the only one that does not remember an
   open/closed state.

   =========================================================================
   NO HEX COLOURS, AND IT IS A RULE RATHER THAN A HABIT
   =========================================================================
   Every value here is a brand.css token, so dark mode costs nothing - the
   same rule rag-ui.css, stack-info.css and user-info.css all follow, and the
   reason static/index.html is served as a FileResponse that can never read
   config.ini: the palette has exactly one home.

   =========================================================================
   `pointer-events` IS NOT LOAD-BEARING HERE, UNLIKE THE OTHER TWO
   =========================================================================
   Worth saying out loud, because the other two files carry a warning not to
   simplify theirs. Those are always on screen and must never intercept a
   click meant for the composer behind them. THIS ONE IS `hidden` UNTIL IT IS
   OPENED, and when it is open it is MEANT to take every click - that is what
   a modal is. So there is no `pointer-events: none` here to preserve, and
   adding one would break the panel rather than protect the page. */

/* ---------------------------------------------------------------------------
   THE OVERLAY. `hidden` on the element does the hiding; this only has to not
   fight it. `display: none` on [hidden] is restated because the flex rule
   below would otherwise win - a flex container is still displayed.
   --------------------------------------------------------------------------- */
#capability[hidden] { display: none; }

#capability {
  position: fixed;
  inset: 0;
  z-index: 50;                   /* above both corner readouts, which are 10 */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5rem 1rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  overflow-y: auto;
}

/* The card. Capped rather than full-bleed: long prose is unreadable at
   monitor width, and the inventory is mostly prose. */
#capability .cap-card {
  width: min(72rem, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   HEADER - title, the one-line provenance, and close.
   --------------------------------------------------------------------------- */
#capability .cap-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--surface);
  border-radius: 12px 12px 0 0;
}

#capability .cap-title { font-size: 1.05rem; font-weight: 600; margin: 0; }

#capability .cap-sub {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
  margin-left: auto;
  text-align: right;
}

#capability .cap-close {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.3rem 0.55rem;
}
#capability .cap-close:hover { color: var(--ink); border-color: var(--accent); }

/* ---------------------------------------------------------------------------
   TABS. Six sections is too many to scroll through, and a reader arrives
   wanting one of them.
   --------------------------------------------------------------------------- */
#capability .cap-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.75rem 1.25rem 0;
}

#capability .cap-tab {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.78rem;
  padding: 0.25rem 0.7rem;
}
#capability .cap-tab:hover { color: var(--ink); }
#capability .cap-tab[aria-selected="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
}
#capability .cap-tab .cap-n { font-family: var(--mono); font-size: 0.7rem; opacity: 0.75; }

#capability .cap-body { padding: 1rem 1.25rem 1.5rem; }

/* ---------------------------------------------------------------------------
   FILTER. One input, because 90 tool names is past the point where scanning
   works and this is the question the page exists to answer - "is there a
   tool for X".
   --------------------------------------------------------------------------- */
#capability .cap-filter {
  width: 100%;
  margin-bottom: 0.9rem;
  padding: 0.45rem 0.6rem;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.85rem;
}
#capability .cap-filter::placeholder { color: var(--muted); }

/* ---------------------------------------------------------------------------
   ROWS. One per endpoint / tool / skill / agent / report.
   --------------------------------------------------------------------------- */
#capability .cap-group { margin-bottom: 1.4rem; }

#capability .cap-group h3 {
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0 0 0.15rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

#capability .cap-group .cap-note {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

#capability .cap-row {
  display: grid;
  grid-template-columns: minmax(11rem, 20rem) 1fr auto;
  gap: 0.25rem 0.9rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}

#capability .cap-name {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink);
  word-break: break-word;
}

#capability .cap-desc { color: var(--muted); font-size: 0.82rem; }

/* THE ONE THAT MATTERS MOST ON THIS PAGE. A description this application
   cannot obtain is rendered as a sentence saying so, in italics, rather than
   as an empty cell - an empty cell reads as a defect in the page, and this is
   a property of the architecture: the app never connects to a remote MCP
   server, so only the CLI is ever told what its tools do. */
#capability .cap-desc.cap-unknown { font-style: italic; opacity: 0.75; }

/* ---------------------------------------------------------------------------
   VERDICTS AND TAGS. Never colour alone - every state carries a word, because
   a reader who cannot distinguish the two colours still has to be able to
   read the answer.

   UPDATED 2026-10-20 - A CONTRAST FIX IN TWO PLACES, AND THE RULE ABOVE IS
   WHY IT MATTERED RATHER THAN BEING COSMETIC. `.cap-tag.yes` below and
   `.cap-tab[aria-selected="true"]` further up both set
   `color: var(--accent-ink)` over `background: var(--accent-soft)`, and those
   two tokens are not a pair. brand.css documents --accent-ink beside its own
   value - *"7.1:1 on --accent"* in light, *"9.0:1 on --accent"* in dark - it
   is the ink for the SOLID accent, #ffffff and #07160d respectively.

   Over --accent-soft that measures 1.28:1 in light (#ffffff on #ccebd6) and
   1.31:1 in dark (#07160d on #15301f). Not low contrast: effectively
   invisible, and on the selected TAB it was the word naming the section you
   are looking at.

   The pair that works in both themes is --accent ON --accent-soft: 5.63:1
   light (#0d652d on #ccebd6) and 6.87:1 dark (#57c98a on #15301f), both past
   AA. That is what both rules now use, and what
   static/playbook/playbook-ui.css's .pb-badge.on was built with.
   --------------------------------------------------------------------------- */
#capability .cap-tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  color: var(--muted);
  white-space: nowrap;
}
#capability .cap-tag.yes { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
#capability .cap-tag.no  { border-style: dashed; }
#capability .cap-tag.off { text-decoration: line-through; }

#capability .cap-warn {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn-ink);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

#capability .cap-empty { color: var(--muted); font-size: 0.82rem; padding: 0.5rem 0; }

/* ---------------------------------------------------------------------------
   NARROW SCREENS. The three-column row becomes two stacked lines; the verdict
   tag stays on the name's line because it is the shortest thing here.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  #capability { padding: 0.75rem 0.5rem; }
  #capability .cap-row { grid-template-columns: 1fr auto; }
  #capability .cap-desc { grid-column: 1 / -1; }
}