/* Plugins hub page-specifics layered on the settings design language
 * (styles/settings.css): art tiles, row messages, the detail overlay, and the
 * MCP inline form. Structural layout comes from .settings-page/.settings-row. */

.plugins-hub-header .page-title {
  margin: 0;
}

/* ---------- toolbar ---------- */

.plugins-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Toolbars mixing labelled fields with buttons share one control-row baseline. */
.plugins-toolbar--fields {
  align-items: flex-end;
}

.plugins-toolbar--fields > .plugins-toolbar__hint {
  display: inline-flex;
  align-items: center;
  min-height: var(--settings-control-height);
}

.plugins-toolbar--fields > .settings-segmented,
.plugins-toolbar--fields > .btn,
.skills-toolbar__agent .agent-select__trigger {
  box-sizing: border-box;
  height: var(--settings-control-height);
}

.plugins-toolbar--fields > .settings-segmented {
  --wa-form-control-height: calc(var(--settings-control-height) - 6px);
}

.plugins-toolbar__search {
  flex: 1 1 260px;
  min-width: 180px;
}

.plugins-toolbar__hint {
  color: var(--muted);
  font-size: var(--control-ui-text-sm);
  white-space: nowrap;
}

.plugins-refresh {
  flex: 0 0 auto;
}

/* Labelled control in a toolbar (label text over a settings input/select). */
.plugins-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.plugins-field > span {
  color: var(--muted);
  font-size: var(--control-ui-text-sm);
  font-weight: 500;
}

.skills-toolbar__agent {
  min-width: 180px;
}

.skills-toolbar__search {
  flex: 1 1 220px;
  min-width: 180px;
}

/* Full-width input rendered directly inside a group row (ClawHub search). */
.plugins-row-input {
  flex: 1 1 auto;
}

/* ---------- collapsible skill groups ---------- */

/* <details> shell keeps the settings-section look while restoring the native
 * expand/collapse the pre-migration skill groups had (cfg-object pattern). */
.skills-group__summary {
  align-items: center;
  cursor: var(--cursor-action);
  list-style: none;
}

.skills-group__summary::-webkit-details-marker {
  display: none;
}

.skills-group__chevron {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  opacity: 0.6;
  transition: transform var(--duration-fast) ease;
}

.skills-group__chevron svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
}

.skills-group[open] > .skills-group__summary .skills-group__chevron {
  transform: rotate(180deg);
}

/* ---------- panel + notices ---------- */

/* Sections inside the tabpanel keep the settings-page rhythm. wa-tab-panel's
   shadow slot (part=base) owns the slotted children's layout, so the column
   flex + gap must live on the part — host-level gap never reaches them. */
.plugins-panel {
  min-width: 0;
}

.plugins-panel::part(base) {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.plugins-readonly {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, var(--border));
  border-radius: var(--radius-md);
  background: var(--warn-subtle);
  color: var(--warn);
  font-size: var(--control-ui-text-sm);
  line-height: 1.45;
}

.plugins-readonly svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plugins-readonly > span:first-child {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.plugins-page-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--danger) 32%, var(--border));
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  background: var(--danger-subtle);
  color: var(--danger);
  font-size: var(--control-ui-text-sm);
}

/* ---------- rows ---------- */

/* Entity row inside a settings group: leading art tile, wrapping so
   row-local messages can break onto a full-width line below the controls. */
.plugins-item {
  flex-wrap: wrap;
  content-visibility: auto;
  contain-intrinsic-block-size: auto 73px;
}

.plugins-item--clickable {
  cursor: var(--cursor-action);
  transition: background var(--duration-fast) var(--ease-out);
}

.plugins-item--clickable:hover {
  background: var(--bg-hover);
}

/* Keyboard-accessible detail opener: the row text is a real button so the
   row's primary action is focusable instead of a div click handler. */
.plugins-item__detail-button {
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: var(--cursor-action);
}

.plugins-item__detail-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.clawhub-skill-result__button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}

.clawhub-skill-result__copy {
  display: grid;
  min-width: 0;
}

.clawhub-skill-result__copy:first-child {
  grid-column: 1 / -1;
}

.clawhub-skill-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--brand-logo-chip-bg);
  object-fit: contain;
}

.clawhub-skill-detail__identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
}

.clawhub-skill-icon--detail {
  width: 56px;
  height: 56px;
  flex-basis: 56px;
}

.clawhub-skill-icon--profile {
  border-radius: var(--radius-full);
  object-fit: cover;
}

.plugins-version {
  margin-left: var(--space-1);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--control-ui-text-xs);
  font-weight: 400;
}

.plugins-meta,
.plugins-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plugins-meta__mono {
  font-family: var(--mono);
  font-size: var(--control-ui-text-xs);
}

.plugins-downloads {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.plugins-downloads svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Item titles/subheadings are semantic <h3>s for AT heading navigation; the
 * shared classes own the look, so only the UA heading margin needs a reset. */
h3.settings-row__title,
h3.plugins-subheader {
  margin: 0;
}

/* Use-case subheading between connector rows inside one group surface. */
.plugins-subheader {
  padding: var(--space-3) var(--space-4) 0;
  color: var(--muted-strong);
  font-size: var(--control-ui-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.plugins-subheader ~ .plugins-subheader {
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

/* ---------- art tiles ---------- */

.plugins-tile {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
}

.plugins-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plugins-tile img.plugins-icon {
  object-fit: contain;
  padding: 6px;
}

.plugins-tile--fallback {
  background: linear-gradient(135deg, var(--plugins-art-a), var(--plugins-art-b));
  border-color: transparent;
  color: rgb(255 255 255 / 92%);
  font-family: var(--mono);
  font-size: var(--control-ui-text-sm);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-shadow: 0 1px 2px rgb(0 0 0 / 25%);
}

.plugins-tile--fallback svg,
.plugins-cover--fallback svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- actions ---------- */

.plugins-install {
  min-width: 78px;
}

.plugins-action-note {
  color: var(--muted);
  font-size: var(--control-ui-text-xs);
}

.plugins-remove {
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 7px;
  color: var(--muted);
}

.plugins-remove svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plugins-remove:hover:not(:disabled) {
  background: var(--danger-subtle);
  color: var(--danger);
}

.plugins-remove-confirm {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--danger);
  font-size: var(--control-ui-text-xs);
  white-space: nowrap;
}

.plugins-remove-confirm .btn.danger {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
  background: var(--danger-subtle);
  color: var(--danger);
}

.plugins-group__link {
  color: var(--muted);
  font-size: var(--control-ui-text-xs);
  text-decoration: none;
  white-space: nowrap;
}

.plugins-group__link:hover {
  color: var(--text-strong);
  text-decoration: underline;
}

.plugins-group__link-icon {
  display: inline-flex;
  width: 11px;
  height: 11px;
  margin-left: 3px;
  vertical-align: -1px;
}

.plugins-group__link-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- messages / empty / loading ---------- */

.plugins-row-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  background: var(--ok-subtle);
  color: var(--ok);
  font-size: var(--control-ui-text-xs);
  line-height: 1.45;
  white-space: pre-wrap;
}

/* Row-local message: full-width line under the row's text + controls. */
.plugins-item > .plugins-row-message {
  flex: 1 1 100%;
}

/* Section-level message rendered directly inside a group surface. */
.plugins-group-message {
  margin: var(--space-3) var(--space-4);
}

.plugins-row-message--error {
  background: var(--danger-subtle);
  color: var(--danger);
}

.plugins-row-message--warning {
  --plugins-policy-review-indent: calc(24px + var(--space-3));

  align-items: stretch;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--warn) 28%, var(--border));
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--control-ui-text-sm);
  white-space: normal;
}

.plugins-policy-review__header {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}

.plugins-policy-review__header > div {
  display: grid;
  gap: 1px;
}

.plugins-policy-review__icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  color: var(--warn);
}

.plugins-policy-review__icon svg {
  width: 18px;
  height: 18px;
}

.plugins-policy-review__header strong {
  color: var(--text-strong);
  font-size: var(--control-ui-text-md);
  line-height: 1.3;
}

.plugins-policy-review__header span {
  color: var(--muted);
}

.plugins-policy-review__findings-panel {
  display: grid;
  gap: var(--space-1);
  margin-left: var(--plugins-policy-review-indent);
}

.plugins-policy-review__findings-heading {
  color: var(--text-strong);
  font-weight: 600;
}

.plugins-policy-review__findings {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plugins-policy-review__findings li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  padding: 0;
  color: var(--text);
}

.plugins-policy-review__findings li::before {
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: var(--radius-full);
  background: var(--warn);
  content: "";
  justify-self: center;
}

.plugins-policy-review__findings li + li {
  margin-top: var(--space-2);
}

.plugins-policy-review__finding-content {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.plugins-policy-review__severity {
  font-size: var(--control-ui-text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plugins-policy-review__severity--info {
  color: var(--muted);
}

.plugins-policy-review__severity--warn {
  color: var(--warn);
}

.plugins-policy-review__severity--critical {
  color: var(--danger);
}

.plugins-policy-review__details {
  margin-left: var(--plugins-policy-review-indent);
  color: var(--muted);
  font-size: var(--control-ui-text-xs);
}

.plugins-policy-review__details summary {
  display: flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  gap: var(--space-2);
  cursor: var(--cursor-action);
  font-weight: 600;
  list-style: none;
}

.plugins-policy-review__details summary::-webkit-details-marker {
  display: none;
}

.plugins-policy-review__details summary::marker {
  content: "";
}

.plugins-policy-review__details-chevron {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform var(--duration-fast) var(--ease-in-out);
}

.plugins-policy-review__details-chevron svg {
  width: 18px;
  height: 18px;
}

.plugins-policy-review__details[open] .plugins-policy-review__details-chevron {
  transform: rotate(90deg);
}

.plugins-policy-review__details summary:hover {
  color: var(--text);
}

.plugins-policy-review__details summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.plugins-policy-review__details-body {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
}

.plugins-policy-review__details-body ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.plugins-policy-review__details-body li {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-2);
  overflow-wrap: anywhere;
  color: var(--text);
}

.plugins-policy-review__details code {
  font-size: inherit;
}

.plugins-policy-review__scope {
  margin: 0 0 0 var(--plugins-policy-review-indent);
  color: var(--muted);
  font-size: var(--control-ui-text-xs);
}

.plugins-policy-review__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-2) 0 0 var(--plugins-policy-review-indent);
  border-top: 1px solid color-mix(in srgb, var(--warn) 20%, var(--border));
}

.plugins-policy-review__actions .btn {
  flex: 0 0 auto;
  min-height: 44px;
}

.plugins-row-message .btn {
  flex: 0 0 auto;
  color: var(--text-strong);
}

.plugins-empty,
.plugins-search-state {
  display: grid;
  place-items: center;
  align-content: center;
  padding: var(--space-8) var(--space-5);
  color: var(--muted);
  text-align: center;
}

.plugins-empty__icon,
.plugins-empty__mascot {
  margin-bottom: var(--space-3);
}

.plugins-empty__icon {
  width: 32px;
  height: 32px;
  color: var(--border-hover);
}

.plugins-empty__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plugins-empty h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: var(--control-ui-text-lg);
  font-weight: 620;
}

.plugins-empty p {
  max-width: 420px;
  margin: var(--space-2) 0 0;
  font-size: var(--control-ui-text-sm);
  line-height: 1.55;
}

.plugins-search-state {
  font-size: var(--control-ui-text-sm);
}

.plugins-search-state--error {
  color: var(--danger);
}

.plugins-detail {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  max-height: min(85vh, 860px);
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--popover);
  box-shadow: var(--shadow-xl);
}

.plugins-cover {
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  background: var(--bg-elevated);
}

.plugins-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plugins-cover img.plugins-icon {
  width: min(180px, 48%);
  height: min(180px, 48%);
  object-fit: contain;
}

.plugins-cover--fallback {
  background: linear-gradient(135deg, var(--plugins-art-a), var(--plugins-art-b));
  color: rgb(255 255 255 / 92%);
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 3px rgb(0 0 0 / 25%);
}

.plugins-detail__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  padding: 7px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(4px);
}

.plugins-detail__close svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plugins-detail__body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-6);
}

.plugins-detail__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.plugins-detail__title h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: 20px;
  font-weight: 680;
  letter-spacing: -0.02em;
}

.plugins-detail__description {
  margin: 0;
  color: var(--text);
  font-size: var(--control-ui-text-sm);
  line-height: 1.6;
}

.plugins-detail__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.plugins-detail__remove {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--danger);
}

.plugins-detail__remove span {
  width: 14px;
  height: 14px;
}

.plugins-detail__remove svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plugins-detail__remove:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  background: var(--danger-subtle);
}

.plugins-detail__meta {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}

.plugins-detail__meta-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: var(--space-3);
  border-bottom: 1px solid var(--border);
  padding: var(--space-2) 2px;
}

.plugins-detail__meta-label {
  color: var(--muted);
  font-size: var(--control-ui-text-sm);
}

.plugins-detail__meta-value {
  min-width: 0;
  overflow: hidden;
  color: var(--text-strong);
  font-size: var(--control-ui-text-sm);
  text-overflow: ellipsis;
}

.plugins-detail__meta-value code {
  font-family: var(--mono);
  font-size: var(--control-ui-text-xs);
}

/* ---------- responsive ---------- */

@media (max-width: 768px) {
  .plugins-content-header {
    display: flex;
  }
}

@media (max-width: 560px) {
  .plugins-toolbar--fields > .settings-segmented {
    height: auto;
  }

  .plugins-remove-confirm {
    flex-wrap: wrap;
    white-space: normal;
  }

  .plugins-row-message {
    align-items: stretch;
    flex-direction: column;
  }

  .plugins-row-message--warning {
    padding: var(--space-2) 0 0;
  }

  .plugins-policy-review__actions,
  .plugins-policy-review__actions .btn {
    flex: 1 1 0;
  }
}