/* Local styles for Examples index - dark themed like Apps */

.examples-listing { padding-left:.6rem; padding-right:.6rem; }
.examples-listing .mega.gradient {
  color: #f59e0b;
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 45%, #d97706 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.example-search { margin:.6rem 0 0; max-width:720px; }
.example-search input[type="search"]{
  width:100%; padding:.65rem .8rem; border-radius:.6rem;
  border:1px solid var(--border); background:var(--panel); color:var(--text);
}
.example-search input[type="search"]::placeholder{ color:var(--muted); }

/* List layout accents (no gradient, flat color cues) */
.example-list{ list-style:none; padding:0; margin:1.2rem 0 2rem; }
.example-item{ display:flex; align-items:flex-start; gap:.6rem; padding:.6rem .2rem; border-bottom:1px solid rgba(255,255,255,0.08); color:#d1d5db; }
.example-item::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--accent-item, var(--accent)); box-shadow:0 0 0 2px rgba(255,255,255,0.06); }
.example-link{ color:inherit; text-decoration:none; display:block; width:100%; padding:.1rem .1rem; transition: color .12s ease, background-color .12s ease; border-radius:.4rem; }
.example-link:hover::after, .example-link:focus-visible::after{ filter:brightness(1.15); }
.example-link:hover, .example-link:focus-visible{ color:var(--text); background:rgba(148,163,184,0.10); border-radius:.4rem; outline:none; }

.example-item.accent-teal{ --accent-item: rgba(14,165,168,0.85); }
.example-item.accent-green{ --accent-item: rgba(159,194,107,0.85); }
.example-item.accent-amber{ --accent-item: rgba(245,158,11,0.88); }
.example-item.accent-teal-green{ --accent-item: rgba(110, 200, 150, 0.85); }
.example-item.accent-amber-teal{ --accent-item: rgba(220, 170, 60, 0.88); }

.example-content{ display:flex; flex-direction:column; gap:.45rem; width:100%; }
.example-title{ font-weight:600; color:var(--text); }
.example-summary{ margin:0; color:var(--muted); font-size:.95rem; line-height:1.4; }
.example-downloads{ display:flex; flex-wrap:wrap; gap:.4rem; }
.example-download{
  display:inline-flex; align-items:center; gap:.2rem;
  padding:.35rem .6rem; border-radius:.4rem;
  border:1px solid rgba(148,163,184,0.45);
  background:rgba(148,163,184,0.15);
  color:var(--text); text-decoration:none; font-size:.9rem;
  transition: background-color .12s ease, border-color .12s ease;
}
.example-download:hover, .example-download:focus-visible{
  background:rgba(148,163,184,0.25);
  border-color:rgba(148,163,184,0.65);
  outline:none;
}
.example-item.example-loading{ color:var(--muted); font-style:italic; }
.example-item.example-error{ color:#fca5a5; }
.no-js-warning{
  background:rgba(248,113,113,0.15);
  color:#fecaca;
  padding:.6rem .8rem;
  border-radius:.4rem;
  margin:0 0 2rem;
}

.example-detail{ max-width:920px; margin:0 auto; display:flex; flex-direction:column; gap:1.8rem; }
.back-link{ margin:0; }
.back-link a{ color:var(--muted); text-decoration:none; font-size:.95rem; }
.back-link a:hover, .back-link a:focus-visible{ color:var(--text); text-decoration:underline; outline:none; }
.example-card{
  background:rgba(15,23,42,0.45);
  border:1px solid rgba(148,163,184,0.2);
  border-radius:.8rem;
  padding:1.2rem 1.4rem;
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.example-card h2{ margin:0; font-size:1.25rem; }
.download-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.reason-list{ list-style:disc; margin:.4rem 0 0 1.2rem; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.muted.small{ font-size:.88rem; }
.example-card pre{ margin:0; }
.example-table{ width:100%; border-collapse:collapse; margin:.4rem 0 0; font-size:.95rem; }
.example-table th, .example-table td{ padding:.5rem .6rem; border:1px solid rgba(148,163,184,0.25); text-align:left; }
.example-table thead{ background:rgba(148,163,184,0.12); color:var(--text); }
.math-block{ font-size:1.05rem; margin:.4rem 0; }
.no-italics{ font-style: normal; letter-spacing: normal; font-variant: normal; }
.example-figure-grid{ display:grid; gap:1rem; margin:.4rem 0 0; }

.example-figure-grid .example-figure{ margin:0; }
.example-figure{ margin:.4rem 0; }
.example-figure img{
  width:100%; height:auto; border-radius:.6rem;
  border:1px solid rgba(148,163,184,0.25);
  box-shadow:0 10px 24px rgba(15,23,42,0.45);
}
.example-figure figcaption{
  margin-top:.35rem; color:var(--muted); font-size:.9rem;
}
.example-download-link{
  color:var(--accent);
  text-decoration:underline;
}
.example-download-link:visited{
  color:var(--accent);
}

@media (max-width: 640px){
  .example-card{ padding:1rem; }
  .example-detail{ gap:1.4rem; }
}

@media (min-width: 680px){
  .example-figure-grid{
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}