/* codemany.com home: one screen, two columns. Left: the value prop (title, one line, CTA).
 * Right: a calm runner card (hero.js) where runners take a job, finish, and are replaced.
 * Stacks on narrow screens; the card hides on very short phones rather than scrolling. */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: center; align-content: center; gap: clamp(32px, 6vw, 88px);
  padding-top: clamp(16px, 4vh, 48px); padding-bottom: clamp(16px, 4vh, 48px);
}
.hero-copy { display: grid; gap: clamp(14px, 2.6vh, 22px); justify-items: start; }
.hero-title {
  margin: 0; font-weight: 700; letter-spacing: -0.055em; line-height: 1.06;
  font-size: clamp(30px, min(4.4vw, 6.4vh), 56px); max-width: 15ch; text-wrap: balance;
}
.hero-lede { margin: 0; max-width: 44ch; font-size: 15px; line-height: 1.65; color: var(--muted-foreground); text-wrap: pretty; }
.hero-ctas { margin-top: clamp(2px, 1vh, 10px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.btn-lg { height: 42px; padding: 0 20px; }
.hero-link { font-size: 13px; color: var(--muted-foreground); text-decoration: none; }
.hero-link:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the runner card ---------- */
.hero-viz { margin: 0; min-width: 0; }
.rcard {
  background: var(--background); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); font-size: 13px; overflow: hidden;
}
.rcard-head, .rcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 40px; padding: 0 16px; white-space: nowrap;
}
.rcard-head { border-bottom: 1px solid var(--border); }
.rcard-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -0.04em; }
.rcard-host { font-size: 12px; color: var(--muted-foreground); }
.rcard-foot {
  border-top: 1px solid var(--border); background: var(--muted);
  font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums;
}
.rcard-foot span:first-child { overflow: hidden; text-overflow: ellipsis; }
.rlist { list-style: none; margin: 0; padding: 6px 0; }

/* Every row has a fixed height and fixed columns, so state changes never move anything. */
.r {
  display: grid; grid-template-columns: 16px 11ch minmax(0, 1fr) 12ch; align-items: center; gap: 12px;
  height: 48px; padding: 0 16px; white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: opacity .45s ease, transform .45s ease;
}
.r + .r { border-top: 1px dashed var(--border); }
.r-name { font-weight: 500; }
.r-job { overflow: hidden; text-overflow: ellipsis; }
.r-status { text-align: right; font-size: 12px; color: var(--muted-foreground); }
.r[data-state="idle"] .r-job { color: var(--muted-foreground); }
.r[data-state="done"] .r-status { color: var(--foreground); }
.r.out { opacity: 0; transform: translateX(8px); }
.r.in { opacity: 0; transform: translateX(-8px); transition: none; }

/* status icon: hollow square (idle), spinning ring (running), filled disc with a tick (done) */
.r-icon { position: relative; width: 16px; height: 16px; display: grid; place-items: center; }
.r-icon::before {
  content: ""; position: absolute; inset: 2px; border: 1.5px solid var(--ring); border-radius: 3px;
  transition: border-radius .3s, background-color .3s, border-color .3s;
}
.r-icon svg { position: relative; width: 12px; height: 12px; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s; }
.r-icon path { fill: none; stroke: var(--background); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.r[data-state="running"] .r-icon::before {
  inset: 1px; border-radius: 50%; border-color: var(--foreground); border-right-color: transparent;
  animation: r-spin 1.1s linear infinite;
}
.r[data-state="done"] .r-icon::before { inset: 0; border-radius: 50%; border-color: var(--foreground); background: var(--foreground); }
.r[data-state="done"] .r-icon svg { opacity: 1; transform: none; }
@keyframes r-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .r, .r-icon::before, .r-icon svg { transition: none; }
  .r[data-state="running"] .r-icon::before { animation: none; border-right-color: var(--foreground); border-style: dotted; }
}

/* roomy desktops: give the card a little more presence next to the title */
@media (min-width: 1200px) and (min-height: 820px) {
  .rcard { font-size: 14px; }
  .r { height: 54px; }
}

/* ---------- narrow: stack (title, line, CTA, then the card) ---------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); align-content: center; gap: clamp(20px, 4vh, 40px); }
  .hero-copy { max-width: 560px; }
  .hero-viz { width: 100%; max-width: 480px; }
  .hero-title { font-size: clamp(26px, min(7vw, 5vh), 44px); max-width: 18ch; }
}
@media (max-width: 480px) {
  .hero { padding-top: clamp(16px, 3vh, 32px); }
  .hero-copy { gap: 12px; }
  .hero-lede { font-size: 13px; }
  .hero-ctas { width: 100%; gap: 10px; }
  .hero-ctas .btn { width: 100%; }
  .hero-ctas .hero-link { width: 100%; text-align: center; }
  .rcard { font-size: 12px; }
  .rcard-head, .rcard-foot { padding: 0 12px; }
  .r { grid-template-columns: 16px 10ch minmax(0, 1fr) 11ch; gap: 8px; height: 40px; padding: 0 12px; }
  .rlist { padding: 2px 0; }
  .r-status { font-size: 11px; }
  .rcard-foot { display: none; }
}
/* short phones (e.g. 375x667): keep the card, drop to three rows */
@media (max-width: 480px) and (max-height: 760px) {
  .hero { align-content: start; }
  .r:nth-child(4) { display: none; }
  .hero-title { font-size: 26px; }
}
/* very short viewports: the value prop wins, the card goes */
@media (max-width: 860px) and (max-height: 600px), (max-height: 460px) {
  .hero-viz { display: none; }
}