/* Smartypants and the openfp agents. design-kit/design-kit.css carries the
 * type, the fonts and the effects; this file sets the theme and the
 * page's own layout. Each accent is its avatar's ring, sampled from the
 * original: Smartypants #805dbf leads the page; Bossypants #0970c7,
 * Nastypants #67a032, Fancypants #d01f1e, Scaredypants #e26513. */

:root {
  --dk-300: #c4b2e6; --dk-400: #a689d8; --dk-500: #805dbf; --dk-600: #6a49a8;
  --dk-500-rgb: 128, 93, 191;
  --dk-pop: #c4b2e6;
  --accent: var(--dk-500);
  /* One clock for everything that moves. */
  --t-move: 300ms;
  --ease-move: cubic-bezier(.2, .7, .2, 1);
}

.smartypants { --accent: #805dbf; }
.bossypants { --accent: #0970c7; }
.nastypants { --accent: #67a032; }
.fancypants { --accent: #d01f1e; }
.scaredypants { --accent: #e26513; }
/* The accent lifted toward white, for small text on the dark ground. */
.agent, .hero { --accent-text: color-mix(in srgb, var(--accent) 62%, #fff); }

* { box-sizing: border-box; }
html { background: #020617; }
body { margin: 0; background: #020617; color: #e2e8f0;
  font-family: 'Open Sans', system-ui, sans-serif; line-height: 1.6; }
/* The body's one child, the page Miso hydrates. */
.page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  overflow-x: clip; }
main { flex: 1; }
a { color: var(--dk-400); text-decoration: none;
  transition: color var(--t-move) var(--ease-move), border-color var(--t-move) var(--ease-move); }
a:hover { color: var(--dk-300); }
.wrap { width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .wrap { padding: 0 1.5rem; } }

/* The wordmark: two runs of Montserrat Black, the accent then white. */
.wordmark { font-family: 'Montserrat', sans-serif; font-weight: 900;
  text-transform: uppercase; letter-spacing: .02em; font-size: 1.15rem; white-space: nowrap; }
.wordmark .lead { color: var(--accent); }
.wordmark .tail { color: #fff; }

/* Chrome */
header.chrome { position: sticky; top: 0; z-index: 40;
  background: rgba(2, 6, 23, .72); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .08); }
header.chrome .wrap { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 4rem; }

.btn { display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; font-size: .78rem;
  border-radius: .5rem; padding: .7rem 1.25rem; }
.btn.ghost { border: 1px solid rgba(255, 255, 255, .18); color: #e2e8f0; }
.btn.ghost:hover { border-color: var(--dk-400); color: #fff; }

.avatar { display: block; border-radius: 50%; height: auto; aspect-ratio: 1; }

/* Hero: the avatar, the wordmark and the line, then the feed. */
.hero { padding: 3rem 0 3.5rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.hero-inner { display: grid; gap: 1.5rem; align-items: center; justify-items: start; }
.hero .avatar { width: 11rem;
  box-shadow: 0 0 0 1px rgba(var(--dk-500-rgb), .35), 0 0 4rem rgba(var(--dk-500-rgb), .35); }
h1.title { margin: 0 0 .5rem; line-height: .95; }
h1.title .wordmark { font-size: clamp(2.6rem, 11vw, 6.5rem); letter-spacing: .01em; }
.tagline { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.45rem); color: #cbd5e1; }
.hero .feed-wrap { margin-top: 2.5rem; }
@media (min-width: 768px) {
  .hero { padding: 4.5rem 0 5rem; }
  .hero-inner { grid-template-columns: 18rem 1fr; gap: 3.5rem; }
  .hero .avatar { width: 18rem; }
}

.role { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--accent-text); }

/* A feed: everything an agent did on the forge, newest first, by day. Its
 * box has its own height and scrolls, so the history that loads after the
 * page hydrates moves nothing around it. */
.feed { height: min(32rem, 70vh); overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: .75rem;
  background: rgba(2, 6, 23, .55); scrollbar-color: rgba(var(--dk-500-rgb), .5) transparent; }
.feed:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.day { content-visibility: auto; contain-intrinsic-size: auto 12rem; }
.day h3 { position: sticky; top: 0; z-index: 1; margin: 0; padding: .45rem 1rem;
  background: #0b1022; border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: .72rem;
  letter-spacing: .12em; color: var(--accent-text); }
.day ol { list-style: none; margin: 0; padding: 0; }
.entry { display: grid; grid-template-columns: 5.5rem 1fr; column-gap: 1rem; row-gap: .1rem;
  align-items: baseline; padding: .6rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.entry .badge { grid-row: span 2; justify-self: start; font-family: 'Montserrat', sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .62rem;
  padding: .15rem .5rem; border-radius: 999px; border: 1px solid currentColor; }
.badge.merged, .badge.approved { color: var(--accent-text); }
.badge.open { color: #34d399; }
.badge.issue { color: #fbbf24; }
.badge.closed, .badge.comment, .badge.commit { color: #94a3b8; }
.entry .title { color: #e2e8f0; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.entry .title:hover { color: #fff; }
.entry .meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8rem; color: #94a3b8;
  font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.entry .at { color: #64748b; }
.more { margin: 1rem 0 0; font-weight: 600; font-size: .95rem; }
.more a { color: var(--accent-text); }
.more a:hover { color: #fff; }
.quiet { margin: .6rem 0 0; color: #64748b; font-size: .95rem; }

/* The other four */
section.roster { padding: 3.5rem 0 4.5rem; }
.agents { display: grid; gap: 1rem; }
@media (min-width: 640px) { .agents { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .agents { grid-template-columns: repeat(4, 1fr); } }
.agent { display: grid; grid-template-columns: 6rem 1fr; gap: 1.1rem; align-items: center;
  padding: 1.25rem; border-radius: 1rem;
  background: rgba(15, 23, 42, .6); border: 1px solid rgba(255, 255, 255, .07);
  border-top: 2px solid var(--accent); }
.agent .avatar { width: 6rem; }
.agent h2 { margin: 0 0 .2rem; line-height: 1.1; }
.agent h2 .wordmark { font-size: 1.2rem; }
@media (min-width: 1100px) { .agent { grid-template-columns: 1fr; justify-items: start; } }

@media (max-width: 560px) {
  .entry { grid-template-columns: 1fr; padding: .6rem .85rem; }
  .entry .badge { grid-row: auto; }
  header.chrome .btn { padding: .55rem .9rem; }
}

/* Footer */
footer.chrome { border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 1.75rem 0; color: #94a3b8; font-size: .85rem; }
footer.chrome .wrap { display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; justify-content: space-between; }
footer.chrome .wordmark { font-size: .95rem; }

/* The foot of the feed's box opens all of it in place. */
.feed .show-all { display: block; width: 100%; margin-top: 1rem; padding: .6rem .9rem; cursor: pointer;
  background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: .5rem; color: var(--accent-text); font: inherit; font-weight: 600; font-size: .9rem; }
.feed .show-all:hover { border-color: var(--accent); }
.feed .show-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }