.run-workspace { --run-accent: #7b243a; --run-tint: #faf4f0; }
.run-workspace.is-leggie { --run-accent: #243c5a; --run-tint: #f2f5f9; }
.run-tracker-card, .run-activity-card { margin-bottom: 1.5rem; border: 1px solid #e7e2dc; border-radius: 1rem; background: white; overflow: hidden; }
.run-tracker-card { padding: 1.75rem; border-top: 4px solid var(--run-accent); background: linear-gradient(135deg, var(--run-tint), white 65%); }
.run-tracker-eyebrow { display: flex; align-items: center; gap: .6rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--run-accent); }
.run-tracker-signal { width: .5rem; height: .5rem; border-radius: 50%; background: var(--run-accent); }
.run-tracker-signal.is-active { box-shadow: 0 0 0 4px color-mix(in srgb, var(--run-accent) 12%, transparent); animation: run-signal 2.5s ease-in-out infinite; }
@keyframes run-signal { 50% { opacity: .4; } }
.run-tracker-card h2 { margin-top: .85rem; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; font-weight: 700; color: #292524; }
.run-tracker-description { max-width: 46rem; margin-top: .65rem; font-size: .925rem; line-height: 1.6; color: #57534e; }
.run-stage-track { display: flex; margin-top: 2rem; padding: 0; list-style: none; }
.run-stage { flex: 1; min-width: 0; position: relative; padding-right: 1rem; }
.run-stage:not(:last-child)::after { content: ''; position: absolute; top: 1.1rem; left: 2.8rem; right: .6rem; height: 2px; background: #e7e5e4; }
.run-stage.is-complete::after { background: #83b7ac; }
.run-stage-marker { display: flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border: 1px solid #d6d3d1; border-radius: 50%; font-size: .8rem; font-weight: 700; color: #78716c; background: #fafaf9; }
.run-stage.is-complete .run-stage-marker { background: #e6f1ed; border-color: #c0d8d1; color: #14675e; }
.run-stage.is-current .run-stage-marker { background: var(--run-accent); border-color: var(--run-accent); color: white; box-shadow: 0 0 0 4px color-mix(in srgb, var(--run-accent) 12%, transparent); }
.run-stage.is-waiting .run-stage-marker { background: #fff3d0; border-color: #c9a052; color: #775214; }
.run-stage.is-stopped .run-stage-marker { background: #fff1f2; border-color: #e5a0aa; color: #9f1239; }
.run-stage-label, .run-stage-state, .run-stage-description { display: block; }
.run-stage-label { margin-top: .7rem; font-weight: 650; font-size: .9rem; color: #44403c; }
.run-stage-state { margin-top: .15rem; font-size: .7rem; color: #78716c; }
.run-stage.is-current .run-stage-state { color: var(--run-accent); font-weight: 700; }
.run-stage-description { margin-top: .45rem; max-width: 12rem; color: #78716c; font-size: .75rem; line-height: 1.4; }
.run-tracker-reassurance { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e7e2dc; color: #57534e; font-size: .8rem; }
.run-activity-card { padding: 1.5rem 1.75rem; }
.run-activity-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; }
.run-activity-header h2 { font-size: 1.15rem; font-weight: 700; }
.run-activity-header p { margin-top: .25rem; font-size: .75rem; color: #78716c; }
.run-record-counts { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .7rem; color: #78716c; }
.run-record-counts strong { color: #44403c; }
.run-activity-list { margin-top: 1.25rem; list-style: none; padding: 0; }
.run-activity-list li { position: relative; display: grid; grid-template-columns: .5rem 1fr auto; gap: .85rem; padding-bottom: 1.1rem; }
.run-activity-list li:not(:last-child)::before { content: ''; position: absolute; left: .2rem; top: .65rem; bottom: 0; width: 1px; background: #e7e5e4; }
.run-activity-dot { width: .45rem; height: .45rem; margin-top: .4rem; border-radius: 50%; background: #b6b0a8; }
.run-activity-list li:first-child .run-activity-dot { background: #0f766e; }
.run-activity-title { color: #44403c; font-weight: 600; font-size: .8rem; }
.run-activity-detail { margin-top: .15rem; font-size: .75rem; line-height: 1.5; color: #78716c; }
.run-activity-list time { font-size: .65rem; color: #78716c; white-space: nowrap; padding-top: .15rem; }
.run-activity-footnote { padding-top: .75rem; border-top: 1px solid #e7e5e4; color: #78716c; font-size: .75rem; }
.run-refresh-message { min-height: 1rem; margin: -.5rem 0 1rem; font-size: .75rem; color: #78716c; }
@media (max-width: 640px) {
  .run-tracker-card, .run-activity-card { padding: 1.25rem; }
  .run-stage-track { flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
  .run-stage { display: grid; grid-template-columns: 2.25rem 1fr auto; column-gap: .8rem; align-items: center; padding: 0; }
  .run-stage-marker { grid-row: 1 / 3; }
  .run-stage-label { margin: 0; }
  .run-stage-state { margin: 0; }
  .run-stage-description { grid-column: 2 / 4; max-width: none; margin-top: .2rem; }
  .run-stage:not(:last-child)::after { top: 2.5rem; left: 1.1rem; right: auto; width: 1px; height: .8rem; }
  .run-activity-list li { grid-template-columns: .5rem 1fr; }
  .run-activity-list time { grid-column: 2; margin-top: -.65rem; }
}
@media (prefers-reduced-motion: reduce) { .run-tracker-signal.is-active { animation: none; } }
