@aquera/mcp-ui-render 0.0.1

package/src/mcp-ui-render.css

@@ -0,0 +1,811 @@
+/* Default "sectioned form" layout for @aquera/mcp-ui-render (design Option A):
+ * a card per section, two-column rows (label+help left, control right), an
+ * authType badge + save-target caption in the header, and a save footer per
+ * card. Styled with Nile nxtgen tokens so it inherits the host theme. Hosts may
+ * override any of these classes. Import once:  import '@aquera/mcp-ui-render/styles.css'. */
+
+.aq-mcp {
+  display: block;
+  max-width: 920px;
+}
+
+.aq-mcp-section {
+  background: var(--ng-colors-bg-primary, #fff);
+  border: 1px solid var(--ng-colors-border-secondary, #e4e7ec);
+  border-radius: 12px;
+  margin-bottom: 20px;
+  overflow: hidden;
+}
+
+.aq-mcp-section__header {
+  padding: 20px 24px 14px;
+}
+.aq-mcp-section__title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--ng-colors-text-primary-900, #101828);
+}
+.aq-mcp-section__caption {
+  margin-top: 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  color: var(--ng-colors-text-tertiary-600, #667085);
+}
+
+.aq-mcp-section__body {
+  padding: 0 24px;
+}
+
+.aq-mcp-field {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 24px;
+  align-items: start;
+  padding: 18px 0;
+  border-top: 1px solid var(--ng-colors-border-secondary-alt, #f0f1f4);
+}
+.aq-mcp-field:first-child {
+  border-top: 0;
+}
+.aq-mcp-field__label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ng-colors-text-secondary-700, #344054);
+}
+.aq-mcp-field__req {
+  color: var(--ng-color-error-500, #d92d20);
+  margin-left: 2px;
+}
+.aq-mcp-field__help {
+  margin-top: 4px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.45;
+  color: var(--ng-colors-text-tertiary-600, #667085);
+}
+.aq-mcp-field__help-toggle {
+  display: inline;
+  margin-left: 4px;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ng-colors-brand-600, #7f56d9);
+  cursor: pointer;
+}
+.aq-mcp-field__control {
+  min-width: 0;
+}
+
+/* `input`/`textarea`/`password`/`select`/`radio` are given Nile's own `label`
+ * (see controls.ts) purely so each control wires its real, native accessible-name
+ * association (`for`/`aria-labelledby`) — Nile leaves that association
+ * `aria-hidden` when `label` is empty. This library already shows the label
+ * VISIBLY in `.aq-mcp-field__label` (the left column, §12 two-column
+ * layout), so Nile's own internal label element is visually hidden here —
+ * NOT `display:none`/`visibility:hidden`, which would also drop it from the
+ * accessibility tree and defeat the whole point; this is the standard
+ * clip-rect "visually hidden, still announced" pattern. */
+.aq-mcp-field__control nile-input::part(form-control-label),
+.aq-mcp-field__control nile-textarea::part(form-control-label),
+.aq-mcp-field__control nile-select::part(form-control-label),
+.aq-mcp-field__control nile-radio-group::part(form-control-label) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* write-once secret in "set" state — shown as a STATE, not a masked value
+   (§7): the host holds the real secret and this element never sees it, so a
+   row of dots would imply there is something here to reveal. */
+.aq-mcp-writeonce {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 14px;
+  color: var(--ng-colors-text-secondary-700, #344054);
+}
+.aq-mcp-field--dense .aq-mcp-writeonce {
+  padding: 10px 12px;
+  border: 1px solid var(--ng-colors-border-secondary, #e4e7ec);
+  border-radius: 8px;
+  background: var(--ng-colors-bg-primary, #fff);
+}
+.aq-mcp-writeonce__lock {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 26px;
+  height: 26px;
+  border-radius: 7px;
+  background: var(--ng-color-success-50, #ecfdf3);
+  color: var(--ng-color-success-600, #079455);
+}
+.aq-mcp-writeonce__state {
+  flex: 1 1 auto;
+  font-size: 13.5px;
+}
+.aq-mcp-writeonce__replace {
+  flex: 0 0 auto;
+  padding: 6px 12px;
+  border: 1px solid var(--ng-colors-border-primary, #d0d5dd);
+  border-radius: 8px;
+  background: var(--ng-colors-bg-primary, #fff);
+  color: var(--ng-colors-text-secondary-700, #344054);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.aq-mcp-writeonce__replace:hover {
+  background: var(--ng-colors-bg-secondary, #f9fafb);
+}
+
+.aq-mcp-section__footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 16px 24px;
+  border-top: 1px solid var(--ng-colors-border-secondary, #e4e7ec);
+  background: var(--ng-colors-bg-secondary, #f9fafb);
+}
+
+/* `sectionsLayout: 'tabs'` (aq-mcp-config) — each section's own card loses its
+ * border/background/margin when nested in a tab panel (the tab strip already
+ * frames it), and its header drops the title line (the tab nav already shows
+ * the label) but keeps the authType badge + save-target caption inline. */
+.aq-mcp-tabs {
+  display: block;
+  margin-bottom: 24px;
+  background: var(--ng-colors-bg-primary, #fff);
+  border: 1px solid var(--ng-colors-border-secondary, #e4e7ec);
+  border-radius: 12px;
+  overflow: hidden;
+}
+.aq-mcp-tabs::part(nav) {
+  /* Vertical padding, not just horizontal — with only `0 24px`, tab labels
+   * sat flush against the card's top edge with no room to breathe. */
+  padding: 14px 24px 0;
+  background: var(--ng-colors-bg-secondary, #f9fafb);
+}
+/* `body` is nile-nav-tab-group's own documented part name for "the container
+ * where the panel content stays" (there's no per-panel `base` part). */
+.aq-mcp-tabs::part(body) {
+  padding: 20px 24px 24px;
+}
+/* Vertical placement ('start'/'end'): the nav column sits directly beside the
+ * content with no card padding of its own — give it room to breathe. Column
+ * width itself comes from nile-nav-tab-group's own `width` attribute (set in
+ * aq-mcp-config.ts), not CSS — that's its documented purpose (fixed per-tab
+ * width, preventing layout shift when switching tabs). */
+.aq-mcp-tabs[placement='start']::part(nav),
+.aq-mcp-tabs[placement='end']::part(nav) {
+  padding: 16px 12px;
+  background: var(--ng-colors-bg-secondary, #f9fafb);
+}
+.aq-mcp-tabs[placement='start']::part(body),
+.aq-mcp-tabs[placement='end']::part(body) {
+  padding: 24px;
+}
+
+/* A section's tab label: left-aligned, never wraps. In horizontal placement
+ * tabs size to their own content as normal (unconstrained) — only vertical
+ * placement gets a hard max-width + ellipsis, since that's the mode with a
+ * fixed-width nav column (`width` attribute, aq-mcp-config.ts) a long label
+ * can actually overflow. nile-nav-tab's slotted content isn't clipped by an
+ * ancestor flex container by default, so a plain `flex:1` on this element
+ * does nothing — `max-width` + `overflow:hidden` is the self-contained
+ * truncation that doesn't depend on the parent's layout. `title` (set in
+ * aq-mcp-config.ts) gives the full label on hover once truncated. */
+.aq-mcp-tab-label {
+  display: block;
+  text-align: left;
+}
+.aq-mcp-tabs[placement='start'] .aq-mcp-tab-label,
+.aq-mcp-tabs[placement='end'] .aq-mcp-tab-label {
+  max-width: 170px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Tab error-indicator (tabsShowErrorIndicator, default true) — a small red
+ * dot after the tab's label, shown only once that section has an ACTUAL
+ * recorded validation error (this.errors), not merely an untouched required
+ * field — see sectionHasError()'s doc comment. Slotted as `slot="suffix"`
+ * (nile-nav-tab's own documented slot for content after the label), not the
+ * default slot — the default slot's label track gets truncated/sized
+ * independently in vertical placement, which squeezed a default-slotted dot
+ * to 0 width; `suffix` doesn't share that sizing. */
+.aq-mcp-tab-error-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  flex: 0 0 auto;
+  margin-left: 8px;
+  border-radius: 50%;
+  background: var(--ng-color-error-500, #d92d20);
+  vertical-align: middle;
+}
+
+.aq-mcp-section--compact {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  margin-bottom: 0;
+}
+.aq-mcp-section__header--compact {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 0 16px;
+  border-bottom: 1px solid var(--ng-colors-border-secondary-alt, #f0f1f4);
+  margin-bottom: 4px;
+}
+.aq-mcp-section__header--compact .aq-mcp-section__caption {
+  margin-top: 0;
+}
+.aq-mcp-section--compact .aq-mcp-section__body {
+  padding: 0;
+}
+.aq-mcp-section--compact .aq-mcp-section__footer {
+  padding: 16px 0 0;
+  margin-top: 4px;
+  background: transparent;
+}
+
+/* ── `sectionsLayout: 'accordion'` ─────────────────────────────────────────
+ * One `nile-accordion` per section, single-open, each header summarising what
+ * is inside (field count + completion chip) so a COLLAPSED section still says
+ * whether it needs attention. The open card's body is a two-column grid of
+ * label-above-control cells — a denser shape than the label-left rows the
+ * other two layouts use, which is what makes a whole multi-section form
+ * scannable at once.
+ *
+ * Everything here is `::part()` on Nile's own components, never a descendant
+ * selector into their shadow DOM — same approach as `.aq-mcp-tabs::part(nav)`
+ * above. Token-with-hex-fallback matches the rest of this file. */
+
+/* The dense grid wants the full container; `.aq-mcp`'s 920px cap is tuned for
+   the single-column label-left rows and would squeeze two columns into
+   unusable widths. Scoped to this layout so stacked/tabs are untouched. */
+.aq-mcp--accordion {
+  max-width: 1180px;
+}
+
+.aq-mcp-acc-list {
+  display: block;
+  margin-bottom: 24px;
+}
+
+/* Each accordion is its own card. Nile's default is a border-TOP only (a
+   stacked list of rows); the design is separated cards, so the base part gets
+   a full border, a radius, and its own vertical rhythm. */
+.aq-mcp-acc {
+  display: block;
+  margin-bottom: 12px;
+}
+.aq-mcp-acc::part(base) {
+  border: 1px solid var(--ng-colors-border-secondary, #e4e7ec);
+  border-radius: 12px;
+  background: var(--ng-colors-bg-primary, #fff);
+  overflow: hidden;
+}
+/* No per-card edge tint: the header's own "N required left" line is the
+   signal now, and a coloured border around the whole card on top of it
+   double-reports the same fact while making a merely-incomplete section look
+   like an error. */
+
+.aq-mcp-acc::part(header) {
+  padding: 16px 20px;
+}
+.aq-mcp-acc::part(summary-icon) {
+  color: var(--ng-colors-text-tertiary-600, #667085);
+}
+/* Nile indents arrow-left content to clear the chevron; the grid below wants
+   the card's full width, and the header's own padding already aligns it. */
+.aq-mcp-acc::part(content) {
+  margin-left: 0;
+  padding: 0 20px 20px;
+}
+
+.aq-mcp-acc__summary {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  width: 100%;
+  min-width: 0;
+}
+/* The icon tile: a soft brand-tinted square, not a bare glyph. It gives the
+   header a fixed left anchor so titles of different lengths still line up
+   down the stack of cards. */
+.aq-mcp-acc__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  background: var(--ng-colors-bg-brand-primary, #eff4ff);
+  color: var(--ng-colors-fg-brand-primary-600, #155eef);
+}
+.aq-mcp-acc__heading {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.aq-mcp-acc__label {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--ng-colors-text-primary-900, #101828);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Status sits beside the chevron as plain text, not a filled pill — a pill
+   here competes with the section title for the eye, and this is a readout,
+   not a control. Colour is never the only signal: each state carries both a
+   mark (check or dot) and its own words. */
+.aq-mcp-acc__state {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.aq-mcp-acc__state--complete {
+  color: var(--ng-color-success-600, #079455);
+}
+.aq-mcp-acc__state--incomplete {
+  color: var(--ng-color-warning-600, #dc6803);
+}
+.aq-mcp-acc__dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+/* ── dense section body: three zones ── */
+/* The open card splits into "things you must decide" (full width), "defaults
+   you can tune" (two-up under a rule), and boolean toggles (full-width rows).
+   See `zones()` in aq-mcp-section.ts for why this reorders the descriptor. */
+.aq-mcp-section--dense {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  margin-bottom: 0;
+  overflow: visible;
+}
+.aq-mcp-section__body--dense {
+  display: block;
+  padding: 0;
+}
+.aq-mcp-zone {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 18px;
+  align-items: start;
+}
+.aq-mcp-zone--toggles {
+  gap: 10px;
+  margin-top: 18px;
+}
+.aq-mcp-zone--defaults {
+  margin-top: 4px;
+}
+/* Two columns when there is room, one when there is not — WITHOUT a media
+ * query, deliberately. What matters is the width of THIS GRID, not of the
+ * window: the same form is ~1180px wide on its own page and ~400px next to a
+ * docked side panel at an identical viewport, and a media query cannot tell
+ * those two apart. `auto-fit` reacts to the real container instead.
+ *
+ * Why the track list is shaped this way, and why the 13 is not a typo for 12:
+ *
+ *   gap        g = 24px
+ *   min track  m = max(240px, C/2 - 13px)   for a container of width C
+ *   columns    n = floor((C + g) / (m + g))
+ *
+ * The `C/2` term is what CAPS the count at two: three tracks would need
+ * 3m + 2g = 1.5C - 39 + 48, which exceeds C for every C, so a very wide
+ * container gets WIDER columns rather than a third one. The `240px` floor is
+ * what drops it to one column when a half-width cell would be too cramped for
+ * a label, control and hint line.
+ *
+ * The subtraction must be slightly MORE than half the gap. At the exact value
+ * (12px = g/2), two tracks plus the gap come to precisely 100% of the
+ * container — measured live at 834px available against 834px needed — and
+ * that dead heat is decided by subpixel rounding, which loses: the grid
+ * silently collapsed to one column at widths that clearly had room for two.
+ * The extra pixel buys slack so the arithmetic resolves the same way at every
+ * fractional container width, and costs only 1px of minimum track width. */
+.aq-mcp-zone--two-up {
+  grid-template-columns: repeat(auto-fit, minmax(max(240px, calc(50% - 13px)), 1fr));
+  column-gap: 24px;
+}
+/* A plain hairline between the fields the user must set and the ones the
+   connector already defaulted. Deliberately UNCAPTIONED: a heading here would
+   be the renderer naming a group the descriptor never described. */
+.aq-mcp-zone__rule {
+  height: 1px;
+  margin: 26px 0 20px;
+  background: var(--ng-colors-border-secondary-alt, #f0f1f4);
+}
+
+.aq-mcp-section--dense .aq-mcp-section__footer {
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 0 0;
+  margin-top: 18px;
+  background: transparent;
+  border-top: 1px solid var(--ng-colors-border-secondary-alt, #f0f1f4);
+}
+
+/* ── dense field cell ── */
+/* Overrides `.aq-mcp-field`'s two-column row: one column, label above the
+   control, no row separator (the zone gap does that job). */
+.aq-mcp-field--dense {
+  display: block;
+  padding: 0;
+  border-top: 0;
+  min-width: 0;
+}
+/* `datatype: "none"` (buttons, reports, tables) renders control-only and
+   spans the grid — see `renderDense`. */
+.aq-mcp-field--dense:has(> .aq-mcp-field__control--full) {
+  grid-column: 1 / -1;
+}
+.aq-mcp-field--dense .aq-mcp-field__label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ng-colors-text-secondary-700, #344054);
+}
+.aq-mcp-field__label-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* "Needs a value" — shown only while the requirement is outstanding (see
+   renderRequiredMark), so it reads as a to-do rather than as decoration.
+   Amber, not red: nothing is wrong yet, it simply is not done. */
+.aq-mcp-field--dense .aq-mcp-field__req {
+  flex: 0 0 auto;
+  margin-left: 0;
+  padding: 2px 8px;
+  border: 1px solid var(--ng-color-warning-300, #fec84b);
+  border-radius: var(--ng-r-full, 999px);
+  background: var(--ng-color-warning-50, #fffaeb);
+  color: var(--ng-color-warning-700, #b54708);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+/* The pass mark on a field that satisfies its own `validation` rules. */
+.aq-mcp-field__valid {
+  color: var(--ng-color-success-600, #079455);
+}
+/* Help sits UNDER the control as hint text (not in a tooltip): always
+   visible, no hover or tap needed, and it reflows with the cell instead of
+   floating over the card. Same `.aq-mcp-field__help` block the other layouts
+   render, so its "View more/less" truncation behaves identically here. */
+.aq-mcp-field--dense .aq-mcp-field__help {
+  margin-top: 6px;
+}
+
+/* ── dense toggle row ── */
+/* A boolean is its own labelled block rather than a label-above-control cell:
+   the control is small enough that stacking a label over it wastes the row,
+   and the description belongs inside the block, not hanging beneath it. */
+.aq-mcp-field--dense[data-toggle] {
+  grid-column: 1 / -1;
+}
+.aq-mcp-field--dense[data-toggle] .aq-mcp-field__toggle {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 14px 16px;
+  border: 1px solid var(--ng-colors-border-secondary, #e4e7ec);
+  border-radius: 10px;
+  background: var(--ng-colors-bg-primary, #fff);
+}
+.aq-mcp-field__toggle-text {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.aq-mcp-field--dense[data-toggle] .aq-mcp-field__label-text {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ng-colors-text-secondary-700, #344054);
+  white-space: normal;
+}
+.aq-mcp-field__toggle-help {
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--ng-colors-text-tertiary-600, #667085);
+}
+.aq-mcp-field--dense[data-toggle] .aq-mcp-field__control {
+  flex: 0 0 auto;
+  padding-top: 2px;
+}
+.aq-mcp-field--dense[data-toggle][data-on] .aq-mcp-field__toggle {
+  border-color: var(--ng-colors-border-brand, #b2ccff);
+  background: var(--ng-colors-bg-brand-primary, #eff4ff);
+}
+
+/* `file` control */
+nile-file-preview {
+  display: block;
+  margin-top: 8px;
+}
+
+/* `test-connection-report` control */
+.aq-mcp-report__meta {
+  margin: 0 0 10px;
+  font-size: 13px;
+  color: var(--ng-colors-text-tertiary-600, #667085);
+}
+.aq-mcp-report__checks {
+  margin-top: 16px;
+  border: 1px solid var(--ng-colors-border-secondary, #e4e7ec);
+  border-radius: 12px;
+  overflow: hidden;
+}
+.aq-mcp-check {
+  border-top: 1px solid var(--ng-colors-border-secondary, #e4e7ec);
+}
+.aq-mcp-check:first-child {
+  border-top: 0;
+}
+/* A plain check (no accordion): the row itself carries the padding. */
+div.aq-mcp-check > .aq-mcp-check__row {
+  padding: 14px 16px;
+}
+/* A failed+mitigation check is a native <details>/<summary> — same row
+   markup/padding as the plain case, just with a trailing chevron and a
+   collapsible panel, so nothing shifts out of alignment between rows. */
+details.aq-mcp-check > summary.aq-mcp-check__row {
+  padding: 14px 16px;
+  cursor: pointer;
+  list-style: none;
+}
+details.aq-mcp-check > summary::-webkit-details-marker {
+  display: none;
+}
+.aq-mcp-check__chevron {
+  flex: 0 0 auto;
+  margin-top: 1px;
+  color: var(--ng-colors-text-tertiary-600, #667085);
+  transition: transform 0.15s ease;
+}
+details[open] > summary .aq-mcp-check__chevron {
+  transform: rotate(180deg);
+}
+details.aq-mcp-check > .aq-mcp-check__fix {
+  margin: 0 16px 14px 16px;
+}
+
+.aq-mcp-check__row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  width: 100%;
+}
+.aq-mcp-check__icon {
+  flex: 0 0 auto;
+  margin-top: 1px;
+}
+.aq-mcp-check--passed .aq-mcp-check__icon {
+  color: var(--ng-color-success-500, #17b26a);
+}
+.aq-mcp-check--failed .aq-mcp-check__icon {
+  color: var(--ng-color-error-500, #d92d20);
+}
+.aq-mcp-check--skipped .aq-mcp-check__icon {
+  color: var(--ng-colors-text-tertiary-600, #98a2b3);
+}
+.aq-mcp-check__body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.aq-mcp-check__name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ng-colors-text-secondary-700, #344054);
+}
+.aq-mcp-check__message {
+  margin-top: 2px;
+  font-size: 13px;
+  color: var(--ng-colors-text-tertiary-600, #667085);
+}
+.aq-mcp-check--failed .aq-mcp-check__message {
+  color: var(--ng-color-error-500, #d92d20);
+}
+.aq-mcp-check__endpoint {
+  flex: 0 0 auto;
+  padding-top: 2px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  color: var(--ng-colors-text-tertiary-600, #667085);
+  white-space: nowrap;
+}
+
+/* The "How to fix" panel — a distinct card inside the accordion's content slot. */
+.aq-mcp-check__fix {
+  background: var(--ng-colors-bg-secondary, #f9fafb);
+  border-radius: 8px;
+  padding: 12px 14px;
+}
+.aq-mcp-check__fix-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--ng-colors-text-tertiary-600, #667085);
+  margin-bottom: 6px;
+}
+.aq-mcp-check__fix-body {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--ng-colors-text-secondary-700, #344054);
+}
+
+/* `properties-table`'s own card header (title/subtitle + action toolbar) — this
+   control is a `FULL_WIDTH_CONTROLS` entry (aq-mcp-field.ts), so `.aq-mcp-field`'s
+   usual two-column grid collapses to one column for its row via this class. */
+.aq-mcp-field__control--full {
+  grid-column: 1 / -1;
+}
+
+/* `permissions-report` control — a validation banner + "N Granted" stat + an
+   All/Success filter + a Resource Type/Permission Type/Access table, matching
+   the live reference's own Credentials-tab Test Connection result. The filter
+   is pure CSS: the two `.aq-mcp-permissions__filter-input` radios are visually
+   hidden but keep native tab/keyboard/click behavior; `:has()` lets the
+   ancestor `.aq-mcp-permissions__report` react to which one is checked without
+   any per-instance selector (`:nth-of-type(2)` = the "Success" radio, always
+   second) — no Lit reactive state needed for the toggle. */
+.aq-mcp-permissions__filter-input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+}
+.aq-mcp-permissions__report {
+  margin-top: 16px;
+}
+.aq-mcp-permissions__report-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--ng-colors-text-primary-900, #101828);
+  margin-bottom: 12px;
+}
+.aq-mcp-permissions__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+.aq-mcp-permissions__stat {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-left: 12px;
+  border-left: 3px solid var(--ng-color-success-500, #12b76a);
+}
+.aq-mcp-permissions__stat-count {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--ng-colors-text-primary-900, #101828);
+}
+.aq-mcp-permissions__stat-label {
+  font-size: 12px;
+  color: var(--ng-colors-text-tertiary-600, #667085);
+}
+.aq-mcp-permissions__filter-labels {
+  display: flex;
+  padding: 2px;
+  background: var(--ng-colors-bg-secondary, #f9fafb);
+  border-radius: 8px;
+}
+.aq-mcp-permissions__filter-label {
+  padding: 5px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ng-colors-text-tertiary-600, #667085);
+  border-radius: 6px;
+  cursor: pointer;
+}
+.aq-mcp-permissions__filter-input:checked + .aq-mcp-permissions__filter-label {
+  background: var(--ng-colors-bg-primary, #fff);
+  color: var(--ng-componentcolors-utility-brand-600, #155eef);
+  box-shadow: 0 1px 2px rgb(16 24 40 / 0.05);
+}
+.aq-mcp-permissions__filter-input:nth-of-type(2):checked ~ .aq-mcp-permissions__table
+  .aq-mcp-permissions__row[data-access]:not([data-access='Granted']) {
+  display: none;
+}
+.aq-mcp-table-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+.aq-mcp-table-card__title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ng-colors-text-secondary-700, #344054);
+}
+.aq-mcp-table-card__subtitle {
+  margin-top: 4px;
+  font-size: 13px;
+  color: var(--ng-colors-text-tertiary-600, #667085);
+}
+.aq-mcp-table-card__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+/* `properties-table` control — a plain semantic <table>, not a Nile component
+   (Nile has no read-only data-table primitive this simple use case needs). */
+.aq-mcp-table {
+  width: 100%;
+  border: 1px solid var(--ng-colors-border-secondary, #e4e7ec);
+  border-radius: 12px;
+  border-collapse: collapse;
+  overflow: hidden;
+  font-size: 13px;
+}
+.aq-mcp-table th,
+.aq-mcp-table td {
+  padding: 12px 16px;
+  text-align: left;
+  border-top: 1px solid var(--ng-colors-border-secondary, #e4e7ec);
+}
+.aq-mcp-table thead th {
+  border-top: 0;
+  background: var(--ng-colors-bg-secondary, #f9fafb);
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--ng-colors-text-tertiary-600, #667085);
+}
+.aq-mcp-table__property {
+  font-weight: 600;
+  color: var(--ng-colors-text-secondary-700, #344054);
+  white-space: nowrap;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.aq-mcp-table__value {
+  color: var(--ng-colors-text-tertiary-600, #667085);
+  overflow-wrap: anywhere;
+}