/* Group and project pages. Everything else comes from site.css. */

/* Cards are links here (the demo used buttons): keep the card look, not link styling. */
a.card { color:inherit; text-decoration:none; }
a.card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.crumb { color:var(--fg-muted); text-decoration:none; }
.crumb:hover { color:var(--fg); text-decoration:underline; }
.callout a { color:var(--fg); }
a.btn { text-decoration:none; }
.body2 { font-size:14px; color:var(--fg-2); margin:0; }
.links { display:flex; gap:8px; flex:none; }
/* WHY links after the description: on phones the buttons would otherwise sit between the name and its facts. */
.idfoot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* Project page: the groups a project is listed in */
.card.listing { padding:12px 16px; gap:4px; }
.card.listing .head { align-items:center; }
.card.listing h3 { white-space:normal; }

/* "What we couldn't confirm": a fold, like YouCoded's FoldRow */
.fold summary { display:flex; align-items:center; gap:4px; cursor:pointer; list-style:none; }
.fold summary::-webkit-details-marker { display:none; }
.fold summary::after { content:""; margin-left:auto; width:8px; height:8px; border-right:2px solid var(--fg-muted); border-bottom:2px solid var(--fg-muted); transform:rotate(45deg); transition:transform .15s; }
.fold[open] summary::after { transform:rotate(-135deg); }
.unc { margin:12px 0 0; padding-left:18px; font-size:12px; color:var(--fg-2); display:flex; flex-direction:column; gap:6px; }

@media (max-width:640px) {
  .identity .row { flex-direction:column; }
  .idfoot { flex-direction:column-reverse; align-items:stretch; }
  .links { width:100%; } .links .btn { flex:1; }
}

/* Footer chips are links on the real site (buttons in the demo). */
a.footchip { text-decoration:none; }

/* The closed apps a group replaces; the one a visitor searched for is highlighted. */
.replaces-row { display:flex; align-items:center; gap:8px; min-width:0; }
.replaces-row .muted11 { flex:none; }
.chip.hl { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.replaces-row .chiprow { flex:1; }

/* Group cards: the title link covers the whole card; the outside links sit above it so they stay clickable. */
.card { position:relative; }
.cardlink { color:inherit; text-decoration:none; }
.cardlink::after { content:""; position:absolute; inset:0; border-radius:inherit; }
.cardlink:focus-visible { outline:none; }
.card:has(.cardlink:focus-visible) { box-shadow:0 0 0 2px var(--accent); }
.outlinks { position:relative; z-index:1; display:flex; gap:6px; flex-wrap:wrap; }
.outlinks .btn { text-decoration:none; }

/* Cards with a screenshot (option B). WHY this frame: the app's Marketplace sets theme previews inside the card,
   4px in, with corners that follow the card's. */
.card.pic { padding:0; gap:0; }
.card.pic .inner { padding:12px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; min-width:0; }
.preview { margin:4px 4px 0; aspect-ratio:16/10; border-radius:calc(var(--radius-xl) - 4px) calc(var(--radius-xl) - 4px) var(--radius-sm) var(--radius-sm); overflow:hidden; background:var(--inset); border:1px solid var(--edge-dim); }
.preview img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.preview.empty { display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--fg-muted); }
.dd.actions { position:relative; z-index:2; flex:none; margin:-4px -6px 0 0; }
.dd.actions .menu { min-width:190px; }
.menu a.mi { text-decoration:none; }
/* Project page screenshots: a row of small pictures; the viewer shows one full size. */
.thumbstrip { display:flex; gap:8px; overflow-x:auto; scrollbar-width:thin; padding-bottom:4px; }
.thumb { flex:none; height:140px; padding:0; border:1px solid var(--edge-card); border-radius:var(--radius-md); overflow:hidden; background:var(--inset); cursor:zoom-in; }
.thumb img { height:100%; width:auto; display:block; }
.thumb:hover { border-color:var(--accent); }
.viewer { position:fixed; inset:0; z-index:60; background:color-mix(in srgb,#000 75%,transparent); display:flex; align-items:center; justify-content:center; padding:24px; }
.viewer img { max-width:100%; max-height:100%; border-radius:var(--radius-lg); box-shadow:0 8px 32px rgba(0,0,0,.5); }
.viewer .close { position:absolute; top:16px; right:16px; }

/* Closed apps are links to their own pages now ("Open-source alternatives to X"). */
a.chip { color:var(--fg-2); text-decoration:none; }
a.chip:hover { border-color:var(--accent); }
a.chip.hl { color:var(--on-accent); }

/* The "Works on" filter sits beside the sort; on an app page, at the right of the top card. */
.tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.card[hidden] { display:none; }
.identity > .row { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }