/* Apps & Agents — the wall.
 *
 * Each card is something somebody here built; clicking opens it in a new tab.
 * This file is the one place the screen's look lives.
 *
 * NAMESPACED ON PURPOSE. Every selector is prefixed .pa- or scoped under
 * #screen-agents. index.html carries a ~4,100-line inline <style> block, and
 * an external stylesheet LOSES to it at equal specificity — so a generic
 * selector here would both lose where it matters and leak where it does not.
 * portalAgentsStyleScope.test.js enforces the namespace.
 *
 * MOTION. Cards arrive in a stagger, lift on hover, and carry a colour derived
 * from their own slug so the same tool is always the same colour — which is
 * what makes a wall of twenty scannable. Every bit of it is inside a
 * prefers-reduced-motion guard; with motion reduced the wall is simply there,
 * fully legible, with no entrance and no lift.
 *
 * The --pa-hue and --pa-i custom properties are set per card by agents.js:
 * the hue from a hash of the slug, the index for the stagger. */

#screen-agents .pa-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
#screen-agents .pa-sub {
  color: var(--text-muted);
  margin: 4px 0 0;
}

/* ---- the wall ---- */
.pa-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.pa-card {
  --pa-hue: 350;
  --pa-i: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.24s cubic-bezier(.2,.8,.3,1),
              box-shadow 0.24s ease,
              border-color 0.24s ease;
  animation: pa-rise 0.5s cubic-bezier(.2,.8,.3,1) backwards;
  animation-delay: calc(var(--pa-i) * 60ms);
}

/* A wash of the card's own colour, which fades up on hover. Behind the
   content (z-index), so it tints rather than veils. */
.pa-card-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background:
    radial-gradient(120% 90% at 100% 0%,
      hsl(var(--pa-hue) 72% 58% / 0.16), transparent 62%),
    linear-gradient(135deg,
      hsl(var(--pa-hue) 60% 55% / 0.07), transparent 55%);
  transition: opacity 0.24s ease;
}
.pa-card:hover {
  transform: translateY(-4px);
  border-color: hsl(var(--pa-hue) 55% 62%);
  box-shadow: 0 14px 30px -14px hsl(var(--pa-hue) 50% 35% / 0.42);
}
.pa-card:hover .pa-card-glow { opacity: 1; }

/* Keyboard users get the same affordance as the mouse. */
.pa-card:focus-visible {
  outline: 2px solid hsl(var(--pa-hue) 60% 50%);
  outline-offset: 3px;
}

.pa-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 3px;
}

.pa-card-tile {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg,
    hsl(var(--pa-hue) 58% 52%),
    hsl(calc(var(--pa-hue) + 18) 55% 42%));
  box-shadow: 0 6px 14px -8px hsl(var(--pa-hue) 55% 40% / 0.75);
  transition: transform 0.24s cubic-bezier(.2,.8,.3,1);
}
.pa-card:hover .pa-card-tile { transform: scale(1.07) rotate(-4deg); }

.pa-card-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
}
.pa-card-desc {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  /* Descriptions are free text; cap them so one long entry cannot set the
     height of every card in its row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* STACKED, so the builder's name gets the card's full width. Side by side it
   shared the row with the host and both ended up truncated -- "Built by Hu..."
   defeats the whole point of showing who made the thing. */
.pa-card-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-top: auto;
  padding-top: 13px;
  font-size: 12px;
  min-width: 0;
  width: 100%;
}

/* WHO BUILT IT. The point of the wall, so it gets a full row of its own and
   is never the thing that gets truncated -- the host gives way first. */
.pa-card-by {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
  color: var(--text);
  font-weight: 600;
}
.pa-card-avatar {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: hsl(var(--pa-hue) 45% 32%);
  background: hsl(var(--pa-hue) 60% 90%);
}
.pa-card-byname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Where the link actually goes. Staff click these because the portal showed
   them, so they should be able to see the destination without hovering. It
   shrinks before the builder's name does. */
.pa-card-host {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* The open-in-new-tab arrow, which slides out on hover. */
.pa-card-go {
  color: var(--text-dim);
  opacity: 0;
  transform: translate(-3px, 3px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.2,.8,.3,1), color 0.22s ease;
}
.pa-card:hover .pa-card-go,
.pa-card:focus-visible .pa-card-go {
  opacity: 1;
  transform: none;
  color: hsl(var(--pa-hue) 55% 45%);
}

/* An entry an admin has taken off the wall. Only admins are sent these. */
.pa-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
}
.pa-card:has(.pa-card-badge) { opacity: 0.62; }
.pa-card:has(.pa-card-badge):hover { opacity: 1; }
/* The badge sits where the arrow does. A hidden entry is one an admin is
   going to edit rather than open, so the badge wins the corner. */
.pa-card:has(.pa-card-badge) .pa-card-go { display: none; }

/* Admin-only edit control, bottom-right so it never sits under the arrow --
   which means the footer has to give it room, or it lands on top of the host. */
.pa-card:has(.pa-card-edit) .pa-card-foot { padding-right: 30px; }
.pa-card-edit {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.pa-card:hover .pa-card-edit,
.pa-card-edit:focus-visible { opacity: 1; }
.pa-card-edit:hover {
  color: hsl(var(--pa-hue) 55% 45%);
  border-color: hsl(var(--pa-hue) 55% 72%);
}

.pa-empty {
  color: var(--text-muted);
  padding: 34px 2px;
}

@keyframes pa-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Motion is decoration here, never information: with it reduced the wall is
   fully present and fully usable, just still. */
@media (prefers-reduced-motion: reduce) {
  .pa-card {
    animation: none;
    transition: border-color 0.01ms, box-shadow 0.01ms;
  }
  .pa-card:hover,
  .pa-card:focus-visible { transform: none; }
  .pa-card-tile { transition: none; }
  .pa-card:hover .pa-card-tile { transform: none; }
  .pa-card-go {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .pa-card-edit { opacity: 1; transition: none; }
}

@media (max-width: 640px) {
  .pa-wall { grid-template-columns: 1fr; }
  /* Touch has no hover, so the affordances are simply always visible. */
  .pa-card-go,
  .pa-card-edit { opacity: 1; }
}