/* Carbon g100 + compact demo cards — explicit contrast for readability */
:root {
  --landing-bg: #161616;
  --landing-surface: #262626;
  --landing-surface-raised: #393939;
  --landing-text: #f4f4f4;
  --landing-text-muted: #c6c6c6;
  --landing-text-subtle: #a8a8a8;
  --landing-link: #78a9ff;
  --landing-border: #525252;
}

cds-button:not(:defined),
cds-tag:not(:defined),
cds-modal:not(:defined) {
  visibility: hidden;
}

.landing-body {
  min-height: 100vh;
  background-color: var(--landing-bg);
  color: var(--landing-text);
}

.landing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 73.75rem;
  margin: 0 auto;
  padding: 1rem 1rem 0.75rem;
  background-color: var(--landing-surface);
  border-bottom: 1px solid var(--landing-border);
}

.landing-header__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.landing-header__mark {
  object-fit: contain;
}

.landing-header__wordmark {
  height: 1.75rem;
  width: auto;
}

.landing-header__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.landing-main {
  width: min(73.75rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 3rem;
}

.landing-hero {
  margin-bottom: 0.25rem;
}

.landing-hero h1 {
  margin: 0 0 0.75rem;
  color: var(--landing-text);
  font-size: 2.625rem;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0;
}

.landing-hero__lead {
  max-width: 42rem;
  margin: 0;
  color: var(--landing-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.landing-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: end;
  margin: 1.5rem 0 2rem;
  padding: 1rem;
  background-color: var(--landing-surface);
  border: 1px solid var(--landing-border);
  /* Force dark theme tokens into Carbon web components (shadow DOM) */
  --cds-background: var(--landing-surface);
  --cds-field: var(--landing-surface-raised);
  --cds-field-01: var(--landing-surface-raised);
  --cds-field-02: var(--landing-surface);
  --cds-text-primary: var(--landing-text);
  --cds-text-secondary: var(--landing-text-muted);
  --cds-text-placeholder: var(--landing-text-subtle);
  --cds-text-helper: var(--landing-text-subtle);
  --cds-border-strong: var(--landing-border);
  --cds-border-subtle: #393939;
  --cds-icon-primary: var(--landing-text);
  --cds-icon-secondary: var(--landing-text-muted);
  --cds-layer: var(--landing-surface);
  --cds-layer-01: var(--landing-surface);
  --cds-layer-02: var(--landing-surface-raised);
  --cds-button-tertiary: var(--landing-link);
}

.landing-search {
  min-width: 0;
}

.landing-search__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.landing-search__label {
  color: var(--landing-text-muted);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.32px;
  line-height: 1.34;
}

.landing-search-input {
  box-sizing: border-box;
  width: 100%;
  height: 3rem;
  padding: 0 1rem 0 2.5rem;
  color: var(--landing-text);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.875rem;
  line-height: 1.29;
  background-color: var(--landing-surface-raised);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a8a8a8' viewBox='0 0 32 32'%3E%3Cpath d='M29 27.5859L22.4502 21.0359C24.0358 19.0812 24.8885 16.6256 24.8584 14.0956C24.8283 11.5656 23.918 9.144 22.3037 7.2296C20.6894 5.3152 18.4813 4.0298 16.0428 3.6039C13.6043 3.178 11.0785 3.639 8.80269 4.9139C6.5269 6.1888 4.63945 8.203 3.44548 10.6602C2.25152 13.1174 1.81902 15.8818 2.2134 18.586C2.60779 21.2902 3.80689 23.7697 5.63604 25.7203C7.46519 27.6709 9.81774 28.996 12.3447 29.4977C14.8717 29.9994 17.4822 29.6526 19.7926 28.5026L26.585 35.295C26.7702 35.4802 27.0176 35.5888 27.275 35.599C27.5324 35.6092 27.7874 35.5204 27.9875 35.3504C28.1876 35.1804 28.3179 34.9419 28.3527 34.6814C28.3875 34.4209 28.3244 34.1574 28.1762 33.942L29 27.5859ZM14 26C12.0222 26 10.0888 25.4135 8.4443 24.3147C6.79981 23.2159 5.51809 21.6541 4.76121 19.8268C4.00433 17.9996 3.8063 15.9889 4.19215 14.0491C4.578 12.1093 5.53041 10.3275 6.92894 8.92893C8.32746 7.53041 10.1093 6.578 12.0491 6.19215C13.9889 5.8063 15.9996 6.00433 17.8268 6.76121C19.6541 7.51809 21.2159 8.79981 22.3147 10.4443C23.4135 12.0888 24 14.0222 24 16C24 18.6522 22.9464 21.1957 21.0711 23.0711C19.1957 24.9464 16.6522 26 14 26Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.75rem center;
  border: none;
  border-bottom: 1px solid var(--landing-border);
  outline: none;
}

.landing-search-input::placeholder {
  color: var(--landing-text-subtle);
}

.landing-search-input:focus {
  outline: 2px solid var(--landing-link);
  outline-offset: -2px;
}

.landing-search-empty {
  display: none;
  margin: 0 0 1.5rem;
  padding: 1rem;
  color: var(--landing-text-muted);
  font-size: 0.875rem;
  text-align: center;
  background-color: var(--landing-surface);
  border: 1px solid var(--landing-border);
}

.landing-search-empty--visible {
  display: block;
}

.landing-section {
  margin-bottom: 2rem;
}

.landing-section--internal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #393939;
}

.landing-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #393939;
}

.landing-section__head h2 {
  margin: 0;
  color: var(--landing-text);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
}

.landing-section__head span {
  color: var(--landing-text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.32px;
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1rem;
}

.demo-card {
  display: flex;
  flex-direction: column;
  min-height: 12.5rem;
  padding: 1rem;
  text-decoration: none;
  color: var(--landing-text);
  background-color: var(--landing-surface-raised);
  border: 1px solid var(--landing-border);
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.demo-card--hidden {
  display: none !important;
}

.landing-section--hidden {
  display: none !important;
}

.demo-card--live:hover {
  background-color: #474747;
  border-color: var(--landing-link);
  transform: translateY(-2px);
}

.demo-card--soon {
  background-color: var(--landing-surface);
  border-color: #393939;
}

.demo-card h3 {
  margin: 0 0 0.5rem;
  color: var(--landing-text);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

.demo-card__summary {
  flex: 1;
  margin: 0;
  color: var(--landing-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.16px;
}

.demo-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.demo-card__top span,
.demo-card__tag,
.demo-card__category {
  color: var(--landing-text-subtle);
  font-size: 0.75rem;
  letter-spacing: 0.32px;
}

.demo-card__path {
  display: block;
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid #393939;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  color: var(--landing-link);
  word-break: break-all;
}

.landing-modal-list {
  margin-top: 1rem;
}

@media (max-width: 42rem) {
  .landing-toolbar {
    grid-template-columns: 1fr;
  }

  .landing-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .landing-section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .landing-hero h1 {
    font-size: 2rem;
  }
}