/* /reactor/agents and each agent's page. The cards borrow Reactor's canvas: an agent here looks as it
   will on yours, an icon tile, its name and model, and its trigger wired to it. The rest is /reactor.css. */
.ra-hero { padding-bottom: 8px; }
.ra-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ra-hero .lede { max-width: 560px; }
.ra-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; color: var(--g-action-text); background: var(--g-action-dim); border: 1px solid var(--g-action-line);
}
.ra-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--g-action); }

/* Claude Code installing one, on the list's hero. */
.ra-term { margin: 0; border: 1px solid var(--g-line-2); border-radius: 16px; background: var(--g-sunken); overflow: hidden; box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.8); }
.ra-term-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--g-line); background: var(--g-panel); }
.ra-term-bar b { color: var(--g-text); font-size: 13.5px; font-weight: 650; margin-left: 3px; }
.ra-term-bar span { margin-left: 6px; font: 11.5px var(--g-mono); color: var(--g-dim); }
.ra-hero .lede a { color: var(--g-text-2); }
.ra-term-lines { list-style: none; margin: 0; padding: 16px 18px 18px; display: grid; gap: 9px; font: 12.5px/1.5 var(--g-mono); color: var(--g-text-2); }
.ra-term-lines li { overflow-wrap: anywhere; }
.ra-term-lines .you { color: var(--g-text); }
.ra-term-lines .you::before { content: "> "; color: #d97757; }
.ra-term-lines .say { padding-left: 16px; position: relative; font-family: var(--g-sans); font-size: 13.5px; }
.ra-term-lines .say::before { content: ""; position: absolute; left: 2px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--g-text-2); }
.ra-term-lines .tool { padding-left: 16px; position: relative; color: var(--g-dim); }
.ra-term-lines .tool::before { content: ""; position: absolute; left: 2px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--g-action); }
.ra-term-lines .tool b { color: var(--g-action-text); font-weight: 500; margin-right: 8px; }
.ra-term-lines .done { padding: 8px 10px; border-radius: 8px; color: var(--g-live-text); background: var(--g-live-dim); font-family: var(--g-sans); font-size: 13.5px; }

/* The icon tile, as on a canvas card. */
/* Each category's tint, the same six Reactor's Marketplace draws; an agent in none keeps the action's. */
.ra-ic, .ra-card, .ra-cats a { --tint: var(--g-action); }
[data-category="maintainer"] { --tint: #8b6cff; }
[data-category="tester"] { --tint: #4fc9f0; }
[data-category="operator"] { --tint: #3ddc97; }
[data-category="security"] { --tint: #ffc857; }
[data-category="growth"] { --tint: #f08a61; }
[data-category="ux"] { --tint: #d98bff; }
.ra-ic {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: color-mix(in srgb, var(--tint) 14%, transparent); color: color-mix(in srgb, var(--tint) 70%, var(--g-text));
  border: 1px solid color-mix(in srgb, var(--tint) 35%, transparent);
}
.ra-ic.small { width: 20px; height: 20px; border-radius: 999px; }
.ra-ic.small .icon, .ra-ic.small svg { width: 11px; height: 11px; }

/* The categories as chips over the list, each jumping to its section. */
.ra-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.ra-cats a {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px 0 7px; border-radius: 999px;
  border: 1px solid var(--g-line-2); background: var(--g-panel); color: var(--g-text-2); font-size: 13px; font-weight: 500; text-decoration: none;
}
.ra-cats a:hover { border-color: var(--tint); color: var(--g-text); }
.ra-cats a > span:last-child { color: var(--g-dim); font: 500 11.5px var(--g-mono); }
.ra-group { scroll-margin-top: 90px; }
.ra-ic .icon, .ra-ic svg { width: 17px; height: 17px; }
.ra-ic.big { width: 44px; height: 44px; border-radius: 12px; }
.ra-ic.big .icon, .ra-ic.big svg { width: 22px; height: 22px; }

/* A category, as the list's section headings and an agent's page say it: #tag · what its agents are for. */
.ra-cat-tag { color: var(--g-action-text); font: 500 0.8em var(--g-mono); letter-spacing: 0; }
.ra-cat-text { color: var(--g-text); }

/* The list, a section per category, each a heading over a rule and its cards. */
.ra-groups { display: grid; gap: 56px; margin-top: 40px; }
.ra-group-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--g-line); color: var(--g-dim); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.ra-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.ra-card {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; height: 100%; border-radius: 14px; text-decoration: none;
  border: 1px solid var(--g-line-2); background: linear-gradient(180deg, #1d212a, #171a21);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ra-card:hover { border-color: color-mix(in srgb, var(--tint) 55%, transparent); transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tint) 14%, transparent), 0 0 30px -10px var(--tint), 0 18px 40px rgba(0, 0, 0, 0.45); }
.ra-card .ra-ah { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--g-line); border-radius: 14px 14px 0 0; background: linear-gradient(90deg, color-mix(in srgb, var(--tint) 12%, transparent), transparent 70%); }
.ra-name { display: block; color: var(--g-text); font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.ra-file { display: block; margin-top: 3px; font: 11px var(--g-mono); color: var(--g-dim); }
.ra-what { padding: 14px 16px 6px; color: var(--g-muted); font-size: 14px; line-height: 1.55; }
.ra-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 14px; font: 11px var(--g-mono); color: var(--g-dim); }
.ra-when { display: inline-flex; align-items: center; gap: 6px; color: var(--g-action-text); font: 500 12.5px/1.3 var(--g-sans); }
.ra-when .icon, .ra-when svg { width: 12px; height: 12px; flex: none; }
.ra-model { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--g-line-2); color: var(--g-text-2); font-family: var(--g-sans); white-space: nowrap; }

/* How it installs. */
.ra-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.ra-flow > div { padding: 22px 20px; border-radius: 14px; border: 1px solid var(--g-line); background: var(--g-panel); }
.ra-flow .n { font: 500 11px var(--g-mono); color: var(--g-action-text); letter-spacing: 0.1em; }
.ra-flow h3 { margin: 14px 0 0; font-size: 16px; font-weight: 650; color: var(--g-text); }
.ra-flow p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--g-muted); }
.ra-flow code { font: 12.5px var(--g-mono); color: var(--g-text-2); }
.ra-share .row { margin-top: 30px; }

/* An agent's page: its hero, its card on a canvas, and how to install it. */
.ra-back { margin: 0 0 26px; font-size: 14px; }
.ra-back a { display: inline-flex; align-items: center; gap: 6px; color: var(--g-action-text); text-decoration: none; }
.ra-back .icon, .ra-back svg { width: 14px; height: 14px; }
.ra-titlerow { display: flex; align-items: center; gap: 14px; }
.ra-titlemeta { display: grid; gap: 7px; min-width: 0; }
.ra-cat { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; color: var(--g-dim); font-size: 14px; line-height: 1.3; text-decoration: none; }
.ra-cat .ra-cat-text { color: var(--g-text-2); }
.ra-cat:hover .ra-cat-text { color: var(--g-text); text-decoration: underline; text-underline-offset: 3px; }
.ra-titlerow + .h1 { margin-top: 20px; }
.ra-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.ra-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--g-line-2); background: var(--g-wash); color: var(--g-text-2); font-size: 13px; }
.ra-chip.ra-when { font-size: 13px; border-color: var(--g-action-line); background: var(--g-action-dim); }

.ra-canvas {
  padding: 40px 28px; border-radius: 18px; border: 1px solid var(--g-line-2); background-color: var(--g-sunken);
  background-image: radial-gradient(circle, rgba(240, 243, 247, 0.07) 1px, transparent 1.2px); background-size: 18px 18px;
}
.ra-pair { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); align-items: center; }
.ra-wire { height: 1px; background: linear-gradient(to right, var(--g-action-line), rgba(61, 220, 151, 0.5)); }
.ra-trg, .ra-agt { display: flex; flex-direction: column; height: 150px; border-radius: 12px; box-sizing: border-box; }
.ra-trg {
  border: 1px solid var(--g-action-line);
  background: linear-gradient(168deg, rgba(139, 108, 255, 0.12) 0%, rgba(40, 47, 58, 0.62) 44%, rgba(31, 37, 46, 0.68) 100%);
  box-shadow: 0 0 0 1px rgba(139, 108, 255, 0.1), 0 0 26px -8px rgba(139, 108, 255, 0.45), 0 12px 28px rgba(0, 0, 0, 0.42);
}
.ra-th { display: flex; align-items: center; gap: 6px; padding: 12px 12px 8px; color: var(--g-action-text); font: 500 10px/1.2 var(--g-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.ra-th .icon, .ra-th svg { width: 11px; height: 11px; flex: none; }
.ra-trg p, .ra-agt p { flex: 1; margin: 0; padding: 0 12px; font-size: 12px; line-height: 1.4; color: var(--g-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ra-tf, .ra-af { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-top: 1px solid var(--g-line); font: 10px/1 var(--g-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--g-dim); }
.ra-tf i, .ra-af i { width: 6px; height: 6px; border-radius: 50%; background: var(--g-live); }
.ra-agt { position: relative; border: 1px solid var(--g-line-2); background: linear-gradient(180deg, #232a35, #1c2129); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.ra-agt::before { content: ""; position: absolute; left: -5px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-radius: 50%; background: var(--g-live); border: 2px solid var(--g-sunken); }
.ra-agt .ra-ah { display: flex; align-items: center; gap: 9px; padding: 10px 12px; margin-bottom: 9px; border-bottom: 1px solid var(--g-line); border-radius: 12px 12px 0 0; background: linear-gradient(90deg, rgba(62, 207, 142, 0.12), transparent 72%); }
.ra-agt .ra-ic { width: 28px; height: 28px; border-radius: 8px; }
.ra-agt .ra-ic .icon, .ra-agt .ra-ic svg { width: 14px; height: 14px; }
.ra-agt b { display: block; color: var(--g-text); font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-sp { display: block; }
.ra-sp em { display: block; margin-top: 3px; font: normal 11px var(--g-mono); color: var(--g-dim); }
.ra-af { color: var(--g-live-text); }

.ra-install { margin-top: 48px; padding: 0 0 18px; border-radius: 16px; border: 1px solid var(--g-action-line); background: var(--g-sunken); overflow: hidden; box-shadow: 0 30px 90px -40px rgba(0, 0, 0, 0.8); }
.ra-cc-bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--g-line); background: var(--g-panel); font-size: 14px; }
.ra-cc-logo { width: 20px; height: 20px; flex: none; }
.ra-cc-bar b { color: var(--g-text); font-weight: 650; }
.ra-cc-bar span { color: var(--g-dim); font-size: 13px; }
.ra-cc-bar a { color: var(--g-action-text); }
.ra-install .top-install { margin: 16px 18px 0; }
.ra-install .top-install pre { background: transparent; border: 0; padding-left: 0; font-size: 14px; color: var(--g-text); }
.ra-install .top-install code::before { content: "> "; color: #d97757; }
.ra-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 14px 18px 0; padding: 14px 0 0; border-top: 1px dashed var(--g-line); font-size: 13.5px; color: var(--g-muted); }
.ra-steps li { display: inline-flex; align-items: center; gap: 9px; }
.ra-steps b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--g-action-dim); border: 1px solid var(--g-action-line); color: var(--g-action-text); font: 500 11px var(--g-mono); }
/* The whole sentence is what gets pasted, so it wraps rather than hiding its end under the copy button. */
.ra-install .top-install pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* What it does, beside what Claude asks. */
.ra-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; margin-top: 72px; align-items: start; }
.ra-prompt { margin-top: 16px; padding: 26px 30px; border-radius: 16px; border: 1px solid var(--g-line); background: var(--g-panel); color: var(--g-text-2); font-size: 15px; line-height: 1.7; }
.ra-prompt > :first-child { margin-top: 0; }
.ra-prompt > :last-child { margin-bottom: 0; }
.ra-prompt p { margin: 0 0 16px; }
.ra-prompt b, .ra-prompt strong { color: var(--g-text); font-weight: 600; }
.ra-prompt ol, .ra-prompt ul { margin: 0 0 18px; padding-left: 0; list-style: none; counter-reset: step; display: grid; gap: 12px; }
.ra-prompt ol > li { position: relative; padding-left: 40px; counter-increment: step; }
.ra-prompt ol > li::before { content: counter(step); position: absolute; left: 0; top: 2px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--g-action-dim); border: 1px solid var(--g-action-line); color: var(--g-action-text); font: 500 11px/1 var(--g-mono); }
.ra-prompt code { padding: 1px 6px; border-radius: 5px; border: 1px solid var(--g-line-soft, var(--g-line)); background: var(--g-sunken); font: 0.86em var(--g-mono); color: var(--g-text); overflow-wrap: anywhere; }
.ra-prompt a { color: var(--g-action-text); overflow-wrap: anywhere; }
.ra-side { display: grid; gap: 34px; position: sticky; top: 90px; }
.ra-asks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.ra-asks li { padding: 13px 15px; border-radius: 12px; border: 1px solid var(--g-line); background: var(--g-panel); }
.ra-asks b { display: block; color: var(--g-text); font-size: 14px; font-weight: 600; }
.ra-asks span { display: block; margin-top: 4px; color: var(--g-muted); font-size: 13.5px; line-height: 1.5; }
.ra-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.ra-tags span { padding: 3px 9px; border-radius: 6px; background: var(--g-wash); border: 1px solid var(--g-line); font: 11.5px var(--g-mono); color: var(--g-text-2); }
.ra-gh { display: flex; justify-content: center; }
.ra-side .fine { margin: 12px 0 0; line-height: 1.5; }

@media (max-width: 960px) {
  .ra-hero-grid, .ra-body { grid-template-columns: 1fr; gap: 36px; }
  .ra-side { position: static; }
  .ra-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ra-flow { grid-template-columns: 1fr; }
  .ra-pair { grid-template-columns: 1fr; gap: 14px; }
  .ra-wire { display: none; }
  .ra-prompt { padding: 20px 18px; }
}
.ra-install .top-install .tcopy { box-shadow: none; background: var(--g-panel); border: 1px solid var(--g-line); }