/* Only component rules still referenced by built pages live here; every
   selector was audited against the class attributes of all built HTML.
   Keep this file loaded before docs-layout.css: that order is what makes
   docs-layout win the shared .man-page/.man-community-* declarations. */

.man-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) 0 3.5rem;
}

.man-purchase-product {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  min-height: 4.65rem;
  padding: .85rem 1rem;
  border: 1px solid var(--man-line);
  border-radius: .55rem;
  color: inherit;
  background: var(--man-layer);
  box-shadow: none;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}

/* Hover feedback only applies to real links; the "coming soon" cards are
   plain spans and must not invite clicks. */
a.man-purchase-product:hover {
  border-color: var(--man-green-strong);
  background: color-mix(in srgb, var(--man-layer) 82%, var(--man-green) 4%);
}

.md-typeset .man-purchase-product__icon {
  box-sizing: border-box;
  width: 2.25rem;
  height: 2.25rem;
  padding: .45rem;
  border-radius: .45rem;
}

.man-purchase-product__icon--windows {
  background: #0078d4;
  fill: #fff;
}

.man-purchase-product__icon--macos {
  background: #24292f;
  fill: #fff;
}

.md-typeset .man-purchase-product__icon--marketplace {
  padding: 0;
  background: #fff;
  object-fit: contain;
}

.md-typeset .man-purchase-product__icon--community {
  padding: .38rem;
  background: var(--man-sidebar);
  object-fit: contain;
}

.man-purchase-product__copy { min-width: 0; }
.man-purchase-product__title {
  display: block;
  color: var(--man-ink);
  font-size: .74rem;
}

.man-purchase-product:hover .man-purchase-product__title { color: var(--man-ink); }
.man-purchase-product__meta { display: block; margin-top: .15rem; color: var(--man-muted); font-size: .66rem; line-height: 1.5; }
.man-purchase-product__meta b {
  color: inherit;
  font-weight: 700;
}
.man-purchase-product__action {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2rem;
  padding: .38rem .62rem;
  color: var(--man-ink);
  border: 1px solid var(--man-ink);
  border-radius: .35rem;
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
}

.man-purchase-product:hover .man-purchase-product__action { color: #172016; border-color: var(--man-green); background: var(--man-green); }
.man-purchase-product__action i { font-size: .85rem; font-style: normal; line-height: 1; }

.man-community-hero p { margin: 0; color: var(--man-muted); line-height: 1.65; }

.man-community-grid { display: grid; grid-template-columns: 1fr; gap: .55rem; }

/* Guidance panels under the channel cards reuse the shared type scale so
   they read as part of the same page rather than default Material prose. */
.md-typeset .man-community-guide {
  margin-top: 1.6rem;
  padding: 1.05rem 1.15rem 1.15rem;
  border: 1px solid var(--man-line);
  border-radius: .55rem;
  background: var(--man-layer);
}

.md-typeset .man-community-guide h2 {
  margin: 1.35rem 0 .5rem;
  color: var(--man-ink);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.4;
}

.md-typeset .man-community-guide h2:first-child { margin-top: 0; }

.md-typeset .man-community-guide p,
.md-typeset .man-community-guide ol {
  margin: 0 0 .5rem;
  color: var(--man-muted);
  font-size: var(--man-body-size);
  line-height: var(--man-body-leading);
}

.md-typeset .man-community-guide ol { padding-left: 1.2rem; }
.md-typeset .man-community-guide li { margin: .16rem 0; }
.md-typeset .man-community-guide li::marker {
  color: var(--man-green-strong);
  font-family: "SF Mono", "Cascadia Mono", monospace;
  font-size: .62rem;
}

@media screen and (max-width: 760px) {
  .md-typeset .man-community-guide { margin-top: 1.2rem; padding: .95rem .9rem 1rem; }
}

/* The persistent documentation rail leaves little room on a phone. Keep the
   action on the same row by sacrificing the decorative platform icon first. */
@media screen and (max-width: 29.99em) {
  .man-purchase-product { grid-template-columns: minmax(0, 1fr) auto; }
  .md-typeset .man-purchase-product__icon { display: none; }
}