/* codemany.com home, demo step 4: the app's main window on its Runners page (sidebar with
 * Overview / Runners / Runs / History and the live status; the runners table). hero.js plays the
 * rows: idle -> running (job ticks in, timer counts) -> passed -> out -> a fresh runner, idle.
 * Rows have fixed heights and columns, so no state change moves the layout. */
.main { flex-direction: row; font-family: var(--app-sans); }
.side {
  display: flex; flex-direction: column; gap: 2px; width: 148px; flex: none; padding: 34px 8px 12px;
  border-right: 1px solid var(--app-border); background: #f7f7f8ee; font-size: 13px;
}
.side > span { display: flex; justify-content: space-between; padding: 5px 10px; border-radius: 6px; }
.side > span.on { background: #e9e9eb; }
.side b { font-weight: 400; font-size: 11px; color: var(--app-muted); }
.side-st { display: grid; grid-template-columns: 8px 1fr; column-gap: 7px; align-items: center; margin: auto 0 0; padding: 0 10px; font-size: 12px; }
.side-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--app-idle); }
.side-st small { grid-column: 2; font-size: 11px; color: var(--app-muted); }
.page { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 30px 18px 10px; background: #fff; }
.pg-h { margin: 0; font: 700 22px/1.2 var(--font); letter-spacing: -.03em; }
.pg-sub { margin: 2px 0 12px; font-size: 12px; color: var(--app-muted); }
.tbl-h { display: flex; justify-content: space-between; padding: 0 10px 6px; border-bottom: 1px solid var(--app-border); font-size: 11px; color: var(--app-muted); }
.tbl-h span:last-child { width: 14ch; }
.rlist { list-style: none; margin: 4px 0 0; padding: 0; flex: 1; min-height: 0; }
.r {
  display: grid; grid-template-columns: minmax(0, 1fr) 14px 12ch; grid-template-rows: auto auto; column-gap: 8px;
  align-content: center; height: 52px; padding: 0 10px; border-radius: 8px; white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: opacity .45s ease, transform .45s ease;
}
.r:nth-child(even) { background: #f6f6f7; }
.r-name { grid-area: 1 / 1; font: 12.5px/1.4 var(--font); }
.r-job { grid-area: 2 / 1; font-size: 11px; color: var(--app-muted); overflow: hidden; text-overflow: ellipsis; }
.r-icon { grid-area: 1 / 2 / 3 / 3; align-self: center; position: relative; width: 14px; height: 14px; display: grid; place-items: center; }
.r-status { grid-area: 1 / 3 / 3 / 4; align-self: center; font-size: 12px; color: var(--app-muted); }
.r[data-state="running"] .r-job, .r[data-state="done"] .r-job { color: var(--app-fg); }
.r[data-state="done"] .r-status { color: var(--app-fg); }
.r.out { opacity: 0; transform: translateX(8px); }
.r.in { opacity: 0; transform: translateX(-8px); transition: none; }

/* status: green dot (idle), spinning ring (running), filled disc with a tick (passed) */
.r-icon::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--app-idle); transition: background-color .3s; }
.r-icon svg { position: relative; width: 10px; height: 10px; opacity: 0; transition: opacity .25s; }
.r-icon path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.r[data-state="running"] .r-icon::before { inset: 1px; background: none; border: 1.6px solid var(--app-fg); border-right-color: transparent; animation: r-spin 1.5s linear infinite; }
.r[data-state="done"] .r-icon::before { inset: 0; background: var(--app-fg); }
.r[data-state="done"] .r-icon svg { opacity: 1; }
@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(--app-fg); border-style: dotted; }
}
.pg-foot { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0 0; font-size: 11px; color: var(--app-muted); white-space: nowrap; }
.pg-foot span:last-child { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 600px) {
  .side { display: none; }
  .page { padding: 28px 12px 8px; }
  .pg-h { font-size: 18px; }
  .pg-sub { margin-bottom: 8px; font-size: 11px; }
  .r { height: 46px; padding: 0 8px; grid-template-columns: minmax(0, 1fr) 14px 11.5ch; }
  .pg-foot span:last-child { display: none; }
}