/* The example gallery: an index of programs and one page per program.
   base.css already styles the editor (pre[data-raku]), the output panel
   (.expected / pre.output), code blocks and tables — this file is only what
   the gallery adds. */

/* The index: a column of program names to run down, one blurb line under each,
   same shape as the FAQ's. */
.ex-entry { margin: 0 0 1.05rem; line-height: 1.5; }
.ex-entry > a { font-size: 1.05rem; font-weight: 600; }
.ex-entry > a:hover { text-decoration: underline; }
.ex-blurb { color: var(--muted); font-size: .94rem; }

/* Programs that only run natively (threads, sockets). */
.badge-native {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .05em .55em;
  margin-left: .4em;
  vertical-align: 1px;
}

.edit-note, .native-note { color: var(--muted); font-size: .92rem; margin: .8rem 0 .2rem; }

/* A long program shown static scrolls inside its own box. */
pre.src-listing { max-height: 28rem; overflow-y: auto; }

.ex-links { margin: .2rem 0 1.6rem; font-size: .92rem; }
.ex-links a { margin-right: 1.2rem; }

.out-note { color: var(--muted); font-size: .8rem; margin-left: .6rem; }
.out-folded {
  color: var(--muted);
  font-size: .82rem;
  margin: -.9rem 0 1.2rem .2rem;
}

.focus { color: var(--muted); font-size: .92rem; }

/* Previous/next program, at the foot of a page. */
.ex-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: .95rem;
}
.ex-nav .nav-next { margin-left: auto; }