.detail-page {
  min-height: 100vh;
  background: linear-gradient(90deg, #fdf2d4, #fdf2d4);
  display: flex;
  flex-direction: column;
}

.detail-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  color: #78716c;
}

.detail-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 32px 48px 22px;
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.detail-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 100px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #000;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.15s;
}

.btn-back:hover {
  background: #f5f5f4;
}

/* Connector Header Section */
.connector-header-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.connector-header-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border-radius: 10px;
}

.connector-icon-wrap {
  background: rgba(255,255,255,0.5);
  border: 1px solid #fff;
  border-radius: 8px;
  padding: 4px;
  flex-shrink: 0;
}

.connector-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
}

.connector-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.connector-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #000;
  text-transform: capitalize;
}

.connector-short-desc {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #334155;
}

.btn-install {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #000;
  background: #ffb195;
  border: 1px solid #000;
  border-radius: 14px;
  padding: 12px 28px;
  cursor: pointer;
  text-transform: capitalize;
  transition: background 0.15s;
  flex-shrink: 0;
}

.btn-install:hover {
  background: #ffa07a;
}

.connector-long-desc {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #000;
  line-height: 1.6;
  text-transform: capitalize;
  white-space: pre-line;
}

.connector-long-desc-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.connector-long-desc.is-collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.long-desc-toggle {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: #334155;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.long-desc-toggle:hover,
.long-desc-toggle:focus-visible {
  color: #000;
}

.long-desc-toggle:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

/* Two-column layout */
.detail-columns {
  display: flex;
  gap: 28px;
  flex: 1;
  min-height: 0;
}

/* Cards */
.detail-card {
  border: 1px solid #000;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.detail-card-left {
  flex: 1;
}

.detail-card-right {
  width: 340px;
  flex-shrink: 0;
  /* Override .detail-card's overflow: hidden so the Signature
     help-badge tooltip can float outside the card. */
  overflow: visible;
}

/* With overflow: visible (above), inner content can extend past the
   card's rounded corners. Round the header's top corners and the
   body's bottom corners so their white backgrounds sit inside the
   card's border-radius. */
.detail-card-right > .card-header {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.detail-card-right > .card-body {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.card-header {
  background: #fff;
  border-bottom: 1px solid #000;
  padding: 22px 20px;
}

.card-header h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #000;
  margin: 0;
  text-transform: capitalize;
}

/* Code-style header (Installation, SKILL.md) - monospace, verbatim casing. */
.card-header-code h3 {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, monospace;
  font-weight: 700;
  text-transform: none;
}

.card-body {
  background: #fff;
  padding: 22px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Sections within Overview & Risks */
.card-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #1c1917;
  width: 100px;
}

.badge-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.detail-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  background: #f5f5f4;
  border-radius: 4px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #1c1917;
  white-space: nowrap;
}

.requirements-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #1c1917;
}

.check-icon {
  width: 14px;
  height: 14px;
}

.more-info-row {
  display: flex;
  gap: 16px;
}

.info-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #1c1917;
  text-decoration: none;
  cursor: pointer;
}

.info-link:hover {
  text-decoration: underline;
}

.external-icon {
  width: 14px;
  height: 14px;
}

/* Detail rows (right panel) */
.detail-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.detail-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #1c1917;
  width: 100px;
  flex-shrink: 0;
}

/* Small "?" help badge next to a detail label, with hover tooltip */
.detail-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border-radius: 50%;
  border: 1px solid #94a3b8;
  background: #fff;
  color: #64748b;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  cursor: help;
  outline: none;
  vertical-align: middle;
  user-select: none;
}

.detail-help:hover,
.detail-help:focus-visible {
  background: #111;
  color: #fff;
  border-color: #111;
}

.detail-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  background: #111;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 6px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 10;
  white-space: normal;
}

.detail-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #111;
}

.detail-help:hover .detail-tooltip,
.detail-help:focus-visible .detail-tooltip {
  opacity: 1;
}

.detail-value {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #1c1917;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.detail-value.detail-links {
  flex-wrap: wrap;
  gap: 8px 12px;
}

.star-icon-detail {
  width: 12px;
  height: 12px;
}

.detail-url a {
  color: #1c1917;
  text-decoration: underline;
  word-break: break-all;
}

.detail-url a:hover {
  color: #000;
}

/* Right card body has tighter gap */
.detail-card-right .card-body {
  gap: 16px;
}

@media (max-width: 900px) {
  .detail-content { padding: 20px 16px; gap: 20px; }
  .detail-columns { flex-direction: column; gap: 16px; }
  .detail-card-right { width: 100%; }
  .connector-header-row { flex-wrap: wrap; }
  .btn-install { width: 100%; text-align: center; }
  .more-info-row { flex-wrap: wrap; gap: 12px; }
}

@media (max-width: 480px) {
  .card-header, .card-body { padding: 18px 16px; }
  .connector-name { font-size: 15px; }
  .section-label, .detail-label { width: auto; }
  .detail-row { flex-direction: column; gap: 4px; }
}

/* ---- New styles for unified report ---- */

.connector-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.severity-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'Poppins', sans-serif;
}

.category-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: #E2E8F0;
  color: #475569;
  font-family: 'Poppins', sans-serif;
}

/* which ecosystem (Claude / Copilot) this connector belongs to, with its logo */
.platform-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px 3px 7px;
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid;
}
.platform-pill-logo { height: 15px; width: auto; object-fit: contain; display: block; }
.platform-pill-claudesec { background: #FBEADF; color: #8A3D1E; border-color: #EFC9B4; }
.platform-pill-copilotsec { background: #E5EEFB; color: #1E40AF; border-color: #BBD2F5; }

.connector-meta-tags {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.meta-tag {
  font-size: 13px;
  color: #78716c;
  font-family: 'Poppins', sans-serif;
}

/* Risk Banners */
.risks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.risk-banner {
  padding: 14px 16px;
  border-radius: 8px;
}

.risk-banner-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.risk-severity-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-family: 'Poppins', sans-serif;
}

.risk-type-label {
  font-size: 14px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  color: #1E293B;
}

.risk-remediation {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px dashed rgba(15, 23, 42, 0.18);
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
}

.risk-remediation-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #166534;
  margin-bottom: 6px;
}

.risk-remediation-steps {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: #1E293B;
}

.risk-remediation-steps li {
  margin: 2px 0;
}

.risk-remediation-tools {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(15, 23, 42, 0.15);
}

.risk-remediation-tools-label {
  font-size: 12px;
  font-weight: 600;
  color: #9A3412;
  margin-bottom: 6px;
}

.risk-remediation-tools-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.risk-remediation-tool {
  display: inline-block;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid;
  cursor: help;
}

.risk-remediation-tool-high {
  background: #FFEDD5;
  color: #9A3412;
  border-color: #FDBA74;
}

.risk-remediation-tool-medium {
  background: #FEF3C7;
  color: #854D0E;
  border-color: #FDE047;
}


.risk-evidence-toggle {
  margin-top: 8px;
  font-family: 'Poppins', sans-serif;
}

.risk-evidence-toggle > summary {
  cursor: pointer;
  font-size: 12px;
  color: #475569;
  user-select: none;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.risk-evidence-toggle > summary::-webkit-details-marker {
  display: none;
}

.risk-evidence-toggle > summary::before {
  content: '▸';
  font-size: 10px;
  transition: transform 0.15s;
}

.risk-evidence-toggle[open] > summary::before {
  transform: rotate(90deg);
}

.risk-evidence-toggle > summary:hover {
  color: #1E293B;
}

.risk-banner-body {
  font-size: 13px;
  line-height: 1.5;
  color: #0F172A;
  font-family: 'Poppins', sans-serif;
}

.risk-evidence {
  margin-top: 8px;
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 12px;
}

.risk-evidence code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  color: #6D28D9;
}

.risk-evidence pre {
  margin: 4px 0 0;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  color: #1E293B;
  white-space: pre-wrap;
  word-break: break-word;
}

.no-risks {
  font-size: 14px;
  color: #059669;
  font-family: 'Poppins', sans-serif;
  padding: 12px 0;
}

/* Tools list */
.tools-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tool-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #F1F5F9;
}

.tool-item .tool-desc {
  flex: 1;
  min-width: 0;
}

.tool-item:last-child {
  border-bottom: none;
}

.tool-name {
  font-size: 12px;
  font-weight: 600;
  color: #1E293B;
  font-family: 'SF Mono', 'Fira Code', monospace;
  white-space: nowrap;
  flex-shrink: 0;
}

.tool-name-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #1E293B;
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  font-family: 'SF Mono', 'Fira Code', monospace;
  white-space: nowrap;
  flex-shrink: 0;
}

.tool-item-high .tool-name-pill {
  background: #FFEDD5;
  border-color: #FDBA74;
  color: #9A3412;
}

.tool-item-medium .tool-name-pill {
  background: #FEF3C7;
  border-color: #FDE047;
  color: #854D0E;
}

/* Risk note — pinned to the right of each tool row */
.tool-risk-note {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid;
  cursor: help;
}

.tool-risk-note-high {
  color: #9A3412;
  background: #FFF7ED;
  border-color: #FDBA74;
  font-weight: 600;
}

.tool-risk-note-medium {
  color: #854D0E;
  background: #FEFCE8;
  border-color: #FDE047;
}

/* Block / Review recommendation tag pinned at the very right of the row */
.tool-block-rec {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid;
  cursor: help;
}

.tool-block-rec-block {
  color: #FFF;
  background: #B91C1C;
  border-color: #991B1B;
}

.tool-block-rec-review {
  color: #92400E;
  background: #FEF3C7;
  border-color: #FBBF24;
}

@media (max-width: 700px) {
  .tool-block-rec {
    margin-left: 0;
    font-size: 10.5px;
  }
}

@media (max-width: 700px) {
  .tool-item {
    flex-wrap: wrap;
  }
  .tool-risk-note {
    margin-left: 0;
    font-size: 11px;
  }
}

.card-header-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tools-risky-summary {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #9A3412;
  background: #FEF3C7;
  border: 1px solid #FDE047;
  padding: 2px 8px;
  border-radius: 999px;
}

.tool-desc {
  font-size: 12px;
  color: #64748B;
  font-family: 'Poppins', sans-serif;
  line-height: 1.4;
}

.info-link {
  margin-right: 12px;
}

/* Tool references in risk descriptions */
.risk-tool-ref {
  display: inline-block;
  background: rgba(0,0,0,0.06);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  color: #6D28D9;
  margin: 1px 2px;
  white-space: nowrap;
}

/* Tags */
.connector-tags {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.connector-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
  background: #EDE9FE;
  color: #6D28D9;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.3px;
  border: 1px solid #DDD6FE;
}

/* Capabilities Grid */
.detail-column-left {
  flex: 1;
  /* Without this, a wide code block in SKILL.md sets the flex item's
     min-content width and the whole column stretches past the layout.
     min-width:0 lets the column shrink so inner <pre> blocks scroll. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.capabilities-card {
  margin-bottom: 0;
  /* Override .detail-card's overflow: hidden so the hover tooltips
     on edge cells can float outside the card without being clipped. */
  overflow: visible;
}

/* Because overflow is visible (above), inner content can extend past
   the card's rounded corners. Round the corner-most children so their
   backgrounds visually sit inside the card's border-radius. */
.capabilities-card > .card-header {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* Bottom row of the grid — desktop 4-col (12 cells: rows 1-4, 5-8, 9-12) */
.capabilities-grid > .cap-cell:nth-child(9) {
  border-bottom-left-radius: 10px;
}
.capabilities-grid > .cap-cell:last-child {
  border-bottom-right-radius: 10px;
}

/* Tablet 3-col (12 cells: rows 1-3, 4-6, 7-9, 10-12) */
@media (max-width: 900px) {
  .capabilities-grid > .cap-cell:nth-child(9) {
    border-bottom-left-radius: 0;
  }
  .capabilities-grid > .cap-cell:nth-child(10) {
    border-bottom-left-radius: 10px;
  }
}

/* Mobile 2-col (12 cells: rows 1-2, 3-4, ... 11-12) */
@media (max-width: 600px) {
  .capabilities-grid > .cap-cell:nth-child(10) {
    border-bottom-left-radius: 0;
  }
  .capabilities-grid > .cap-cell:nth-child(11) {
    border-bottom-left-radius: 10px;
  }
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  background: #000;
  /* Match the card's bottom corner radius so the grid's own black
     background doesn't show as sharp spikes outside the rounded
     corners of the bottom-left and bottom-right cells. */
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.cap-cell {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: none;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  cursor: help;
  outline: none;
}

.cap-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  background: #111;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 6px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 10;
  white-space: normal;
}

.cap-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #111;
}

.cap-cell:hover .cap-tooltip,
.cap-cell:focus-visible .cap-tooltip {
  opacity: 1;
}

/* Desktop 4-col grid: anchor tooltip to the cell's own edge for
   first/last columns so it doesn't run off the card's side. */
.cap-cell:nth-child(4n+1) .cap-tooltip {
  left: 0;
  transform: none;
}
.cap-cell:nth-child(4n+1) .cap-tooltip::after {
  left: 20px;
  transform: none;
}
.cap-cell:nth-child(4n) .cap-tooltip {
  left: auto;
  right: 0;
  transform: none;
}
.cap-cell:nth-child(4n) .cap-tooltip::after {
  left: auto;
  right: 20px;
  transform: none;
}

/* Tablet 3-col grid */
@media (max-width: 900px) {
  .cap-cell:nth-child(4n+1) .cap-tooltip,
  .cap-cell:nth-child(4n) .cap-tooltip {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .cap-cell:nth-child(4n+1) .cap-tooltip::after,
  .cap-cell:nth-child(4n) .cap-tooltip::after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .cap-cell:nth-child(3n+1) .cap-tooltip {
    left: 0;
    right: auto;
    transform: none;
  }
  .cap-cell:nth-child(3n+1) .cap-tooltip::after {
    left: 20px;
    right: auto;
    transform: none;
  }
  .cap-cell:nth-child(3n) .cap-tooltip {
    left: auto;
    right: 0;
    transform: none;
  }
  .cap-cell:nth-child(3n) .cap-tooltip::after {
    left: auto;
    right: 20px;
    transform: none;
  }
}

/* Mobile 2-col grid */
@media (max-width: 600px) {
  .cap-cell:nth-child(3n+1) .cap-tooltip,
  .cap-cell:nth-child(3n) .cap-tooltip {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .cap-cell:nth-child(3n+1) .cap-tooltip::after,
  .cap-cell:nth-child(3n) .cap-tooltip::after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .cap-cell:nth-child(odd) .cap-tooltip {
    left: 0;
    right: auto;
    transform: none;
  }
  .cap-cell:nth-child(odd) .cap-tooltip::after {
    left: 20px;
    right: auto;
    transform: none;
  }
  .cap-cell:nth-child(even) .cap-tooltip {
    left: auto;
    right: 0;
    transform: none;
  }
  .cap-cell:nth-child(even) .cap-tooltip::after {
    left: auto;
    right: 20px;
    transform: none;
  }
}

/* Principles grid tooltips are always the short "Not applicable", so keep them
   centred directly above the cell in every column and at every breakpoint. The
   per-column edge-anchoring above is only needed for the capability grid's long
   descriptions; on the principles grid it just makes the little tip hang off to
   the side. Higher specificity so it wins over all the nth-child rules. */
.principles-card .principles-grid .cap-cell .cap-tooltip {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.principles-card .principles-grid .cap-cell .cap-tooltip::after {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.cap-negative {
  background: #FEF2F2;
  color: #991B1B;
  font-weight: 600;
}

/* Private-data access reads as a flag, not a destructive risk - amber tint
 * to match the Medium severity color used elsewhere on the site. */
.cap-cell.cap-key-reads_private_data.cap-negative {
  background: #FEF3C7;
  color: #854D0E;
}

.cap-neutral {
  background: #DBEAFE;
  color: #1E40AF;
  font-weight: 600;
}

.cap-positive {
  background: #F0FDF4;
  color: #166534;
  font-weight: 600;
}

.cap-no {
  background: #FAFAFA;
  color: #CBD5E1;
}

.cap-icon {
  flex: 0 0 20px;
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.cap-label {
  min-width: 0;
  line-height: 1.25;
  white-space: normal;
}

@media (max-width: 900px) {
  .capabilities-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .capabilities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .capabilities-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .cap-cell .cap-tooltip {
    left: 0;
    right: auto;
    transform: none;
  }
  .cap-cell .cap-tooltip::after {
    left: 20px;
    right: auto;
    transform: none;
  }
}

/* ============================================================
   Plutonium standalone detail-page additions
   (header reused from plutonium.css; these glue it together)
   ============================================================ */

/* Per-planet page wash. The cream matches the home hero; copilot gets a
   cool tint so the two ecosystems stay visually distinct. */
.detail-page { background: #fdf2d4; }
.detail-page.planet-copilotsec { background: #eef2f7; }
.detail-page.planet-marketplace { background: #eafaf2; }

/* Give the fixed-feel header room and cap the content like the figma. */
/* flex:1 pins the footer to the page bottom even while the detail JSON is
   still loading (otherwise the footer floated mid-viewport, flashed, then got
   pushed down when content arrived); belt-and-braces, the footer stays hidden
   until the loading placeholder is gone. */
.detail-content { padding-top: 36px; position: relative; z-index: 1; flex: 1; }
.detail-page:has(.detail-loading) .site-footer { visibility: hidden; }

/* Report-mistake link (right side of the top row) */
.report-mistake {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 100px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #1c1917;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.report-mistake:hover { background: #f5f5f4; }

/* Loading + error */
.detail-loading, .detail-error {
  display: flex; align-items: center; justify-content: center;
  flex: 1; min-height: 50vh; gap: 14px; flex-direction: column;
  font-family: 'Poppins', sans-serif; font-size: 17px; color: #57534e;
  text-align: center; padding: 40px;
}
.detail-error a {
  font-weight: 600; color: #000; text-decoration: underline;
}

/* The connector name row icon falls back to a neutral chip when no icon. */
.connector-icon-wrap.no-icon {
  width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
  font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 20px; color: #1c1917;
}

/* Long description should not force-capitalize sentences mid-word. */
.connector-long-desc { text-transform: none; }

@media print {
  .connector-long-desc.is-collapsed { display: block; }
  .long-desc-toggle { display: none; }
}

/* Floating Figma deco on the detail page sides */
.detail-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.detail-deco > * { position: absolute; }

@media (max-width: 1100px) { .detail-deco { display: none; } }

/* =====================================================================
   Safe Market-Space detail pages (green theme): principles grid, install
   card, rendered SKILL.md. Reuses the connector-detail chrome above.
   ===================================================================== */
.detail-page.planet-marketplace { background: linear-gradient(90deg, #e9f9e2, #e9f9e2); }
.platform-pill-marketplace { background: #d6f5c6; color: #1f7a3d; border-color: #a7e08a; }

/* Principles grid - the capabilities matrix rendered for the 8 principles.
   It reuses .capabilities-grid / .cap-cell (4->3->2->1 cols at the same
   breakpoints, so the shared tooltip edge-anchoring just works); only the
   8-cell corner rounding and the no-tooltip pass cells differ. */
.principles-card > .card-header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.principles-sub { font-family: 'Poppins', sans-serif; font-size: 12px; color: #6b7280; font-weight: 500; }
/* Force four equal, shrinkable columns at desktop (capabilities uses bare
   1fr, which lets long principle labels push the grid past the card edge);
   below 900px the shared capabilities breakpoints take over. Labels wrap. */
@media (min-width: 901px) {
  .principles-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Stack the icon above a uniform-height, centered label so every icon sits at
   the horizontal center of its cell and lines up across rows and columns;
   icon-beside-label went ragged once the longer principle labels wrapped. */
.principles-grid .cap-cell {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 7px;
  padding: 16px 12px;
}
.principles-grid .cap-icon { font-size: 20px; line-height: 1; width: auto; }
.principles-grid .cap-label {
  white-space: normal;
  line-height: 1.35;
  min-height: 2.8em; /* reserve two lines so one- and two-line labels keep the icon at the same height */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* not-applicable principles keep their icon but dimmed/greyscaled */
.principles-grid .cap-no .cap-icon { opacity: .4; filter: grayscale(1); }
/* pass cells carry no tooltip, so they aren't "help" targets */
.principles-grid > .cap-cell.cap-positive { cursor: default; }
/* bottom-left corner: cell 5 at 4-col, cell 7 at 3/2-col, last cell at 1-col */
.principles-grid > .cap-cell:nth-child(5) { border-bottom-left-radius: 10px; }
@media (max-width: 900px) {
  .principles-grid > .cap-cell:nth-child(5) { border-bottom-left-radius: 0; }
  .principles-grid > .cap-cell:nth-child(7) { border-bottom-left-radius: 10px; }
}
@media (max-width: 380px) {
  .principles-grid > .cap-cell:nth-child(7) { border-bottom-left-radius: 0; }
  .principles-grid > .cap-cell:last-child { border-bottom-left-radius: 10px; }
}
.princ-cell:hover .princ-tooltip, .princ-cell:focus-visible .princ-tooltip { opacity: 1; }
.princ-cell:nth-child(odd) .princ-tooltip { left: 0; transform: none; }
.princ-cell:nth-child(odd) .princ-tooltip::after { left: 24px; transform: none; }
.princ-cell:nth-child(even) .princ-tooltip { left: auto; right: 0; transform: none; }
.princ-cell:nth-child(even) .princ-tooltip::after { left: auto; right: 24px; transform: none; }

/* Installation card - blue command band + copy icon (matches figma) */
.install-body { display: flex; flex-direction: column; gap: 16px; }
.install-step-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12px; color: #64748b; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .05em; }
.install-path { font-weight: 500; font-size: 12px; color: #6b7280; background: #f1f5f9; padding: 1px 7px; border-radius: 5px; text-transform: none; letter-spacing: 0; }
.install-cmd { display: flex; align-items: center; gap: 12px; background: #E8F1FF; border: 1px solid #C2D9F7; border-radius: 10px; padding: 12px 12px 12px 16px; }
.install-cmd code { flex: 1; min-width: 0; font-family: 'SFMono-Regular', ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.5; color: #1d63c4; overflow-x: auto; white-space: pre; }
.install-cmd-block { align-items: flex-start; }
.install-cmd-block pre { flex: 1; min-width: 0; margin: 0; overflow-x: auto; }
.install-cmd-block pre code { display: block; white-space: pre; }
.install-copy { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: #fff; border: 1px solid #C2D9F7; color: #1d63c4; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.install-copy:hover { background: #1d63c4; color: #fff; border-color: #1d63c4; }
.install-copy svg { display: block; }
.install-copy .ic-check { display: none; }
.install-copy.copied { background: #dcfce7; border-color: #86efac; color: #16a34a; }
.install-copy.copied .ic-copy { display: none; }
.install-copy.copied .ic-check { display: inline-flex; }
/* "Open in Claude directory" reuses the blue band as a clickable link. */
.install-cmd-link { text-decoration: none; transition: background .12s, border-color .12s; }
.install-cmd-link code { color: #1d63c4; cursor: pointer; }
.install-cmd-link:hover { background: #d6e6ff; border-color: #9cc1f2; }
.install-open { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: #fff; border: 1px solid #C2D9F7; color: #1d63c4; transition: background .12s, color .12s, border-color .12s; }
.install-open svg { display: block; width: 16px; height: 16px; }
.install-cmd-link:hover .install-open { background: #1d63c4; color: #fff; border-color: #1d63c4; }
.install-instructions { margin: 10px 0 0; padding-left: 20px; font-family: 'Poppins', sans-serif; font-size: 13px; color: #44403c; line-height: 1.6; }
.install-instructions li { margin-bottom: 4px; }
.install-note { font-family: 'Poppins', sans-serif; font-size: 12.5px; color: #6b7280; line-height: 1.5; padding: 10px 12px; background: #f8fafc; border-radius: 8px; }
.install-instructions code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: #eef2f7; padding: 1px 5px; border-radius: 4px; }

/* "Hosted connector" disclaimer shown above the columns on every connector
   detail page - amber note that the publisher's server-side code can't be
   vetted live. */
.remote-disclaimer { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 22px; padding: 14px 16px; background: #fff8ed; border: 1px solid #fcd9a6; border-left: 4px solid #e8941f; border-radius: 12px; }
.remote-disclaimer .rd-ico { flex: none; color: #b9690f; margin-top: 1px; }
.remote-disclaimer .rd-text { font-size: 13.5px; line-height: 1.55; color: #7a4a12; }
.remote-disclaimer .rd-text strong { color: #6b3410; font-weight: 600; }
.remote-disclaimer .rd-text a { color: #b25710; font-weight: 600; text-decoration: underline; }
.remote-disclaimer .rd-text a:hover { color: #8a3f08; }

/* Pinned skill installer: "(vetted pinned version)" header tag, the reviewed
   commit badge, and the Claude Code / Cursor / Codex agent tab picker. */
.install-vetted { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12px; text-transform: none; letter-spacing: 0; color: #1f7a3d; }
.install-pin-commit { font-family: 'SFMono-Regular', ui-monospace, Menlo, monospace; font-weight: 500; font-size: 11px; text-transform: none; letter-spacing: 0; color: #15803d; background: #ecfdf3; border: 1px solid #bbf7d0; border-radius: 999px; padding: 2px 9px; }
.install-tabs { display: inline-flex; gap: 8px; margin-bottom: 12px; }
/* Each agent tab always carries its brand colour with white text - Claude
   orange, Cursor black, Codex blue. Inactive tabs are dimmed; the active one is
   full-strength with a lift. */
.install-tab { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13px; color: #fff; background: #44403c; border: none; border-radius: 8px; padding: 7px 16px; cursor: pointer; opacity: .35; transition: opacity .12s, box-shadow .12s, transform .12s; }
.install-tab[data-agent="claude-code"] { background: #c15f3c; }
.install-tab[data-agent="cursor"]      { background: #111827; }
.install-tab[data-agent="codex"]       { background: #2563eb; }
.install-tab:hover { opacity: .6; }
.install-tab.is-active { opacity: 1; box-shadow: 0 2px 6px rgba(15,23,42,.22); }
.install-pin-panel { display: none; }
.install-pin-panel.is-active { display: block; }
/* The pinned command is long, so wrap it into a taller block instead of a
   single horizontally-scrolling line; copy button stays pinned to the top. */
.install-pin-panel .install-cmd { align-items: flex-start; }
.install-pin-panel .install-cmd code { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; }

/* Rendered SKILL.md */
.skill-md { font-family: 'Poppins', sans-serif; font-size: 14px; line-height: 1.65; color: #292524; word-wrap: break-word; }
.skill-md h1, .skill-md h2, .skill-md h3, .skill-md h4 { font-family: 'Poppins', sans-serif; font-weight: 700; color: #1c1917; line-height: 1.3; margin: 20px 0 8px; }
.skill-md h1 { font-size: 22px; } .skill-md h2 { font-size: 18px; } .skill-md h3 { font-size: 15.5px; } .skill-md h4 { font-size: 14px; }
.skill-md > *:first-child { margin-top: 0; }
.skill-md p { margin: 0 0 12px; }
.skill-md ul, .skill-md ol { margin: 0 0 12px; padding-left: 22px; }
.skill-md li { margin-bottom: 5px; }
.skill-md a { color: #1f7a3d; text-decoration: underline; }
.skill-md code { background: #eef2f4; border-radius: 4px; padding: 1px 6px; font-family: 'SFMono-Regular', ui-monospace, Menlo, monospace; font-size: 12.5px; color: #0f172a; }
.skill-md pre.md-pre { background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin: 0 0 14px; }
.skill-md pre.md-pre code { background: none; color: inherit; padding: 0; font-size: 12.5px; line-height: 1.5; }
.skill-md blockquote { border-left: 3px solid #a7e08a; margin: 0 0 12px; padding: 4px 14px; color: #52525b; background: #f6fbf2; border-radius: 0 8px 8px 0; }
.skill-md hr { border: none; border-top: 1px solid #e7e5e4; margin: 18px 0; }
.skill-md-empty { color: #94a3b8; font-style: italic; }

/* SKILL.md collapse: clip to a preview height + fade out the bottom edge. */
.skill-md.collapsed {
  max-height: 340px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.skill-md-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 14px auto 0;
  background: none; border: none; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13px; color: #1c1917;
}
.skill-md-card .card-body { display: flex; flex-direction: column; min-width: 0; }
.skill-md { min-width: 0; max-width: 100%; }
.skill-md pre.md-pre { max-width: 100%; }
.skill-md-toggle:hover { color: #1f7a3d; }
.skill-md-toggle .smt-chevron { transition: transform .18s ease; }
.skill-md-toggle.expanded .smt-chevron { transform: rotate(180deg); }
.skill-md-toggle .smt-label-less { display: none; }
.skill-md-toggle.expanded .smt-label-more { display: none; }
.skill-md-toggle.expanded .smt-label-less { display: inline; }

.eligible-pill { display: inline-flex; align-items: center; gap: 6px; background: #d6f5c6; color: #1f7a3d; border: 1px solid #a7e08a; border-radius: 100px; padding: 3px 12px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12px; }
.meta-tag-official { background: #d6f5c6; color: #1f7a3d; }


/* Per-block how-to hint above each install command / config block */
.install-hint { font-size: 12.5px; color: #57534e; line-height: 1.45; margin: 0 0 8px; }
.install-hint code { font-family: 'SFMono-Regular', ui-monospace, Menlo, monospace; font-size: 11.5px; background: rgba(0,0,0,.05); border-radius: 4px; padding: 1px 5px; }

/* macOS/Linux <-> Windows toggle: compact, logo-only segmented control. align-self
   keeps it from stretching to the full width of the flex-column install body. The
   card's data-os attribute then shows the matching variant via .os-unix/.os-win. */
.install-os { align-self: flex-start; display: inline-flex; border: 1.5px solid #000; border-radius: 100px; overflow: hidden; margin-bottom: 16px; }
.install-os-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 30px; padding: 0; background: #fff; border: none; color: #78716c; cursor: pointer; transition: background .12s, color .12s; }
.install-os-btn + .install-os-btn { border-left: 1.5px solid #000; }
.install-os-btn:hover { background: #f5f5f4; color: #1c1917; }
.install-os-btn.is-active { background: #1c1917; color: #fff; }
.install-os .os-ico { width: auto; height: 15px; display: block; }
.install-card[data-os="unix"] .os-win { display: none; }
.install-card[data-os="win"]  .os-unix { display: none; }

/* "Before you run this, replace ..." note for fill-in placeholders */
.install-replace { margin-top: 10px; font-size: 12.5px; color: #57534e; background: #fffaf0; border: 1.5px solid #f0e2c0; border-radius: 10px; padding: 9px 12px; }
.install-replace-title { display: block; font-weight: 600; color: #8a6d1f; margin-bottom: 4px; }
.install-replace ul { margin: 0; padding-left: 18px; }
.install-replace li { margin: 2px 0; line-height: 1.45; }
.install-replace code { font-family: 'SFMono-Regular', ui-monospace, Menlo, monospace; font-size: 11.5px; background: rgba(0,0,0,.06); border-radius: 4px; padding: 1px 5px; }