/* Cards, lists, and gists styles (extracted from original theme) */
.card{
  background:linear-gradient(180deg, color-mix(in srgb, var(--card) 8%, transparent), var(--card));
  border:1px solid var(--tile-border);
  padding:18px;
  border-radius:10px;
  margin:0 0 12px 0;
}

.card .inner{
  background:linear-gradient(180deg, color-mix(in srgb, var(--card) 8%, transparent), var(--card));
  border:1px solid var(--tile-border);
  padding:18px;
  border-radius:10px;
}

.card h1{color:var(--card-title);margin:0 0 8px 0;font-size:1.5rem}
.card h2{color:var(--card-title);margin:12px 0 6px 0;font-size:1.25rem}
.card h3{color:var(--card-title);margin:10px 0 6px 0;font-size:1.15rem}
.card h4{color:var(--card-title);margin:8px 0 2px 0;font-size:1.1rem}
.card h5{color:var(--card-title);margin:6px 0 2px 0;font-size:1.05rem}
.card p.small{margin:8px 0 0 0;color:var(--muted);font-size:0.9rem}

.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:720px){.grid{grid-template-columns:repeat(2,1fr)}}

.gist{
  display:flex;
  flex-direction:column;
  padding:12px;
  border-radius:12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--card) 8%, transparent),transparent);
  border:1px solid var(--tile-border);
  position:relative;
  overflow:hidden;
  transition:border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

a.gist{color:inherit;text-decoration:none;cursor:pointer}
a.gist:hover{
  border-color:color-mix(in srgb, var(--accent) 28%, var(--tile-border));
  box-shadow:
    0 0 0 1px var(--gist-glow-soft),
    0 0 22px 0 color-mix(in srgb, var(--gist-glow) 55%, transparent),
    0 0 52px -20px var(--gist-glow);
}
a.gist:focus-visible{outline:2px solid color-mix(in srgb, var(--accent) 25%, transparent);outline-offset:2px}

.gist-title{color:var(--accent);text-decoration:none;font-weight:650}
a.gist:hover .gist-title{text-decoration:underline}

.gist::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  border-radius:inherit;
  background:color-mix(in srgb, var(--gist-glow-soft) 35%, transparent);
  transition:opacity 180ms ease;
}

a.gist:hover::before,
a.gist:focus-visible::before{opacity:1}

@media (prefers-reduced-motion: reduce){
  .gist{transition:none}
  .gist::before{transition:none}
}

.meta{color:var(--muted);font-size:.9rem;margin-top:6px}
/* Prevent long descriptions from wrapping; show ellipsis when truncated */
.meta{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.small{font-size:.85rem;color:var(--muted)}
.list-empty{color:var(--muted);padding:12px}

#gists > p.small{margin:0 0 12px 0}
noscript.small{display:block;margin-top:12px;color:var(--muted)}

/* Callout blocks: Note, Warning, Important, Tip, Caution */
.callout{
  padding:12px 16px;
  border-radius:8px;
  margin:0 0 16px 0;
  display:block;
  background:color-mix(in srgb, var(--card) 6%, transparent);
  color:var(--text);
  border-left:4px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.callout strong{font-weight:700;margin-right:8px}
.callout--note{background:color-mix(in srgb, var(--accent) 4%, transparent);border-left-color:var(--accent)}
.callout--important{background:color-mix(in srgb, var(--accent) 10%, transparent);border-left-color:var(--accent)}
.callout--tip{background:color-mix(in srgb, #38b000 6%, transparent);border-left-color:#38b000}
.callout--warning{background:color-mix(in srgb, #ffb020 6%, transparent);border-left-color:#ffb020;color:var(--text)}
.callout--caution{background:color-mix(in srgb, #ff6b6b 6%, transparent);border-left-color:#ff6b6b}