/* LightPane catalog — index + per-pane page styles.
   Built on top of tokens.css; uses the Sunlit palette for accents
   and the same Plus Jakarta Sans / Instrument Serif type-stack as
   the rest of the marketing site. */

/* ---- shared ---- */
.lp-catalog-provider {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--lp-r-pill);
  font-family: var(--lp-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid transparent;
}
.lp-catalog-provider-aws   { background: #fff3e0; color: #b45309; border-color: #f8c785; }
.lp-catalog-provider-azure { background: #e6f1fb; color: #0c5cb0; border-color: #a8c8ec; }
.lp-catalog-provider-gcp   { background: #eaf1fc; color: #1a73e8; border-color: #b8cdf1; }

.lp-catalog-tier {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--lp-r-pill);
  font-family: var(--lp-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid transparent;
  background: var(--lp-sunk);
  color: var(--lp-ink-3);
  border-color: var(--lp-line);
}
.lp-catalog-tier-explorer { background: var(--lp-amber-wash); color: #6b4d00; border-color: var(--lp-amber-soft); }
.lp-catalog-tier-builder  { background: #ffeac6; color: #7a3a00; border-color: #f6c98a; }
.lp-catalog-tier-team     { background: #1a1814; color: #fff8e8; border-color: #1a1814; }

/* ---- index page ---- */
.lp-catalog-hero {
  padding: 56px 0 24px;
  background: linear-gradient(180deg, var(--lp-amber-wash) 0%, var(--lp-canvas) 100%);
  border-bottom: 1px solid var(--lp-line);
}
.lp-catalog-hero h1 {
  font-family: var(--lp-font-serif);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.01em;
}
.lp-catalog-lede {
  margin-top: 12px;
  font-size: 17px;
  color: var(--lp-ink-2);
  max-width: 62ch;
  line-height: 1.55;
}

.lp-catalog-controls {
  padding: 24px 0 8px;
  background: var(--lp-canvas);
  border-bottom: 1px solid var(--lp-line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.lp-catalog-filter-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.lp-catalog-search {
  flex: 1 1 280px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--lp-r-pill);
  border: 1px solid var(--lp-line-strong);
  background: var(--lp-paper);
  font: inherit;
  font-size: 14px;
  color: var(--lp-ink);
}
.lp-catalog-search:focus {
  outline: 2px solid var(--lp-amber);
  outline-offset: 2px;
}
.lp-catalog-filter-counts {
  font-family: var(--lp-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
}

.lp-catalog-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.lp-catalog-filter-label {
  font-family: var(--lp-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
  margin-right: 4px;
}
.lp-catalog-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--lp-r-pill);
  border: 1px solid var(--lp-line-strong);
  background: var(--lp-paper);
  color: var(--lp-ink-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s var(--lp-ease), color .15s var(--lp-ease), border-color .15s var(--lp-ease);
}
.lp-catalog-chip:hover {
  border-color: var(--lp-ink-3);
}
.lp-catalog-chip.is-active {
  background: var(--lp-ink);
  color: #fff8e8;
  border-color: var(--lp-ink);
}

.lp-catalog-grid-wrap {
  padding: 28px 0 64px;
}
.lp-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.lp-catalog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 44px;
  border-radius: var(--lp-r);
  border: 1px solid var(--lp-line);
  background: var(--lp-paper);
  text-decoration: none;
  color: var(--lp-ink);
  transition: transform .15s var(--lp-ease), box-shadow .2s var(--lp-ease), border-color .2s var(--lp-ease);
}
.lp-catalog-card:hover {
  transform: translateY(-1px);
  border-color: var(--lp-line-strong);
  box-shadow: var(--lp-shadow-2);
}
/* Filter chips set `card.hidden = true` to remove unmatched cards from
   the grid. The `[hidden]` HTML attribute normally implies
   `display: none`, but our `display: flex` rule above wins via
   specificity, so the cards stay visible. Reassert `display: none`
   explicitly on the hidden state. */
.lp-catalog-card[hidden] {
  display: none;
}
.lp-catalog-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.lp-catalog-card-label {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
}
.lp-catalog-card-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lp-ink-3);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-catalog-card-arrow {
  position: absolute;
  bottom: 16px;
  right: 18px;
  color: var(--lp-ink-3);
  font-size: 18px;
}

/* ---- Service-discovery card -----------------------------------------
   Distinct class so the two card types can diverge later if needed
   (the embed snippet, page structure and underlying mechanism are
   meaningfully different). For now the visual style is the same: this
   rule inherits everything from .lp-catalog-card by re-stating the
   same shorthand. Edit either rule independently when divergence is
   wanted. */
.lp-catalog-card-service {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 44px;
  border-radius: var(--lp-r);
  border: 1px solid var(--lp-line);
  background: var(--lp-paper);
  text-decoration: none;
  color: var(--lp-ink);
  transition: transform .15s var(--lp-ease), box-shadow .2s var(--lp-ease), border-color .2s var(--lp-ease);
}
.lp-catalog-card-service:hover {
  transform: translateY(-1px);
  border-color: var(--lp-line-strong);
  box-shadow: var(--lp-shadow-2);
}
.lp-catalog-card-service[hidden] { display: none; }

/* Kind badge — currently only emitted on service cards (compound
   cards still show the tier badge instead). Subtle outline style so
   it reads as informational metadata rather than a status pill. */
.lp-catalog-kind-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-family: var(--lp-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--lp-line-strong);
  color: var(--lp-ink-3);
  background: transparent;
}
.lp-catalog-kind-badge--service {
  border-color: #b8d4ec;
  color: #2c5d8a;
  background: #f0f7fc;
}
.lp-catalog-empty {
  margin-top: 28px;
  padding: 32px;
  text-align: center;
  color: var(--lp-ink-3);
  background: var(--lp-sunk);
  border: 1px dashed var(--lp-line-strong);
  border-radius: var(--lp-r);
}

/* ---- per-pane page ---- */
.lp-catalog-pane {
  padding: 36px 0 64px;
}
.lp-catalog-breadcrumb {
  font-family: var(--lp-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
  margin-bottom: 18px;
}
.lp-catalog-breadcrumb a {
  color: var(--lp-ink-3);
  text-decoration: none;
}
.lp-catalog-breadcrumb a:hover { color: var(--lp-ink); }
.lp-catalog-breadcrumb span[aria-hidden] { margin: 0 8px; }

.lp-catalog-pane-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: start;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--lp-line);
  margin-bottom: 28px;
}
@media (max-width: 760px) {
  .lp-catalog-pane-head { grid-template-columns: 1fr; }
}
.lp-catalog-pane-head h1 {
  font-family: var(--lp-font-serif);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 48px);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 6px 0 0;
}
.lp-catalog-pane-lede {
  margin-top: 12px;
  font-size: 16px;
  color: var(--lp-ink-2);
  line-height: 1.55;
  max-width: 60ch;
}

.lp-catalog-pane-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, auto));
  gap: 14px 28px;
  padding: 16px 20px;
  background: var(--lp-sunk);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
}
.lp-catalog-pane-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lp-catalog-meta-label {
  font-family: var(--lp-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
}

.lp-catalog-preview-wrap {
  position: relative;
  margin-bottom: 36px;
  border-radius: var(--lp-r-lg);
  background:
    radial-gradient(ellipse at top right, rgba(255, 197, 24, 0.10), rgba(255, 197, 24, 0) 60%),
    var(--lp-paper);
  border: 1px solid var(--lp-line);
  box-shadow: var(--lp-shadow-2);
  padding: 28px;
}
.lp-catalog-preview-tag {
  display: flex;
  justify-content: flex-end; /* align inline content to the right edge */
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;       /* breathing room above the pane below */
  font-family: var(--lp-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
}
.lp-catalog-preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lp-amber);
  box-shadow: 0 0 8px var(--lp-amber);
}
.lp-catalog-preview {
  min-height: 240px;
}

.lp-catalog-section {
  margin: 40px 0;
}
.lp-catalog-section h2 {
  font-family: var(--lp-font-serif);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.005em;
  margin-bottom: 14px;
}
.lp-catalog-body p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--lp-ink-2);
  margin-bottom: 14px;
  max-width: 70ch;
}
.lp-catalog-body h2 {
  font-family: var(--lp-font-serif);
  font-weight: 400;
  font-size: 26px;
  margin: 32px 0 12px;
}
.lp-catalog-body h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 22px 0 8px;
}
.lp-catalog-body ul {
  padding-left: 1.2em;
  margin-bottom: 14px;
}
.lp-catalog-body li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--lp-ink-2);
  margin-bottom: 6px;
}
.lp-catalog-body code {
  font-family: var(--lp-font-mono);
  font-size: 13px;
  background: var(--lp-sunk);
  border: 1px solid var(--lp-line);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--lp-ink);
}
.lp-catalog-body pre {
  background: #1a1814;
  color: #fff8e8;
  padding: 18px 20px;
  border-radius: var(--lp-r);
  overflow-x: auto;
  margin: 14px 0 22px;
  position: relative;
  font-family: var(--lp-font-mono);
  font-size: 13px;
  line-height: 1.6;
}
.lp-catalog-body pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.lp-catalog-cross-cloud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.lp-catalog-cross-cloud-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--lp-r);
  border: 1px solid var(--lp-line);
  background: var(--lp-paper);
  text-decoration: none;
  color: var(--lp-ink);
  transition: transform .15s var(--lp-ease), box-shadow .2s var(--lp-ease);
}
.lp-catalog-cross-cloud-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--lp-shadow-2);
}
.lp-catalog-cross-cloud-label {
  flex: 1;
  font-weight: 500;
  font-size: 14px;
}
.lp-catalog-cross-cloud-arrow {
  color: var(--lp-ink-3);
  font-size: 18px;
}

.lp-catalog-pane-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--lp-line);
}
.lp-catalog-back {
  font-family: var(--lp-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lp-ink-2);
  text-decoration: none;
}
.lp-catalog-back:hover { color: var(--lp-ink); }
.lp-catalog-source {
  font-family: var(--lp-font-mono);
  font-size: 11px;
  color: var(--lp-ink-4);
}
.lp-catalog-source code {
  background: transparent;
  border: none;
  font-size: inherit;
  color: inherit;
  padding: 0;
}

/* ---- Per-service-pane page  ---------------------------------------- */
.lp-catalog-pane--service .lp-catalog-kind-badge {
  margin-left: 6px;
}
.lp-catalog-embed-snippet {
  background: var(--lp-sunk, #f7f5ef);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  padding: 14px 16px;
  font-family: var(--lp-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  line-height: 1.55;
  color: var(--lp-ink);
  overflow-x: auto;
  white-space: pre;
  margin: 8px 0 12px;
}
.lp-catalog-embed-copy {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  background: var(--lp-paper);
  color: var(--lp-ink);
  border: 1px solid var(--lp-line-strong);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.lp-catalog-embed-copy:hover {
  background: var(--lp-sunk);
}
.lp-catalog-embed-copy.is-copied {
  background: #e6f4ea;
  border-color: #34a853;
  color: #1e6e33;
}
.lp-catalog-attr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.lp-catalog-attr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: 4px;
}
.lp-catalog-attr-label {
  flex: 1;
  font-weight: 500;
  color: var(--lp-ink);
}
.lp-catalog-attr-id {
  font-family: var(--lp-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--lp-ink-3);
  background: var(--lp-sunk);
  padding: 1px 6px;
  border-radius: 3px;
}
.lp-catalog-attr-format {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
}
.lp-catalog-section--placeholder {
  background: var(--lp-sunk);
  border: 1px dashed var(--lp-line-strong);
  border-radius: var(--lp-r);
  padding: 18px 22px;
}

/* ============================================================
   Catalog intro — "About the catalog" accordion
   ============================================================
   Sits between the hero and the sticky controls. Open by default;
   collapses on first interaction with search/chips, re-expands via
   the "About the catalog" toggle button in the filter row.
   Uses the grid-template-rows: 1fr → 0fr animation trick so the
   collapsed height is content-accurate without measuring in JS. */
.lp-catalog-intro {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 280ms ease, border-color 280ms ease;
  background: var(--lp-canvas);
  border-bottom: 1px solid var(--lp-line);
}
.lp-catalog-intro-inner {
  overflow: hidden;
  min-height: 0;
}
.lp-catalog-intro--collapsed {
  grid-template-rows: 0fr;
  border-bottom-color: transparent;
}
.lp-catalog-intro .lp-container {
  padding-top: 32px;
  padding-bottom: 36px;
}

.lp-catalog-intro-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--lp-ink);
  max-width: 72ch;
  margin: 0 0 28px;
}

.lp-catalog-intro-section-h {
  font-family: var(--lp-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
  margin: 0 0 12px;
}

.lp-catalog-intro-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
.lp-catalog-intro-card {
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  background: var(--lp-paper);
  padding: 18px 20px;
}
.lp-catalog-intro-card h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--lp-ink);
}
.lp-catalog-intro-count {
  font-family: var(--lp-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--lp-ink-3);
  font-weight: 400;
}
.lp-catalog-intro-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--lp-ink-2);
}

.lp-catalog-intro-uses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.lp-catalog-intro-use {
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: baseline;
}
.lp-catalog-intro-use-arrow {
  grid-row: 1;
  grid-column: 1;
  color: var(--lp-amber);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}
.lp-catalog-intro-use strong {
  grid-row: 1;
  grid-column: 2;
  font-size: 14px;
  color: var(--lp-ink);
}
.lp-catalog-intro-use p {
  grid-row: 2;
  grid-column: 2;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lp-ink-2);
}

.lp-catalog-intro-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--lp-amber-soft);
  background: var(--lp-amber-wash);
  border-radius: var(--lp-r);
  margin-bottom: 16px;
}
.lp-catalog-intro-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-ink);
  color: var(--lp-paper);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 120ms ease;
}
.lp-catalog-intro-cta-btn:hover {
  background: #000;
}
.lp-catalog-intro-cta-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lp-ink-2);
}

.lp-catalog-intro-hint {
  margin: 0;
  font-family: var(--lp-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--lp-ink-3);
}

/* Toggle button — lives in the filter row, always visible. */
.lp-catalog-intro-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--lp-r-pill);
  border: 1px solid var(--lp-line-strong);
  background: var(--lp-paper);
  font: inherit;
  font-size: 12px;
  color: var(--lp-ink-2);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.lp-catalog-intro-toggle:hover {
  background: var(--lp-amber-wash);
  color: var(--lp-ink);
}
.lp-catalog-intro-toggle-chevron {
  font-size: 10px;
  line-height: 1;
}

/* Mobile: stack the type / use grids. */
@media (max-width: 720px) {
  .lp-catalog-intro-types,
  .lp-catalog-intro-uses {
    grid-template-columns: 1fr;
  }
  .lp-catalog-intro-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .lp-catalog-intro .lp-container {
    padding-top: 24px;
    padding-bottom: 28px;
  }
}