/* /scripts and a run's page (ScriptsController, ScriptRunsController). */

.shy-scripts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.shy-script {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-top: 1px solid var(--shy-border);
}

.shy-script:first-child {
  border-top: 0;
  padding-top: 0;
}

.shy-script__text {
  min-width: 0;
}

.shy-script__text p {
  margin: 0.25rem 0 0;
  color: var(--shy-text-muted);
}

.shy-script__text .shy-script__last {
  font-size: 0.875rem;
}

.shy-script form,
.shy-script > a {
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .shy-script {
    flex-direction: column;
  }
}

.shy-script-status {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.shy-script-status--success { background: var(--shy-success-tint); color: var(--shy-success); }
.shy-script-status--danger  { background: var(--shy-danger-tint);  color: var(--shy-danger); }
.shy-script-status--warning { background: var(--shy-warning-tint); color: var(--shy-warning); }
.shy-script-status--info    { background: var(--shy-brand-tint);   color: var(--shy-brand); }
.shy-script-status--muted   { background: var(--shy-surface-alt);  color: var(--shy-text-muted); }

.shy-script-run p {
  margin: 0 0 0.75rem;
}

.shy-script-run__result {
  font-weight: 600;
}

.shy-script-run__error {
  color: var(--shy-danger);
  font-weight: 600;
}

.shy-script-run__note {
  color: var(--shy-text-muted);
}

.shy-script-run__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.shy-script-run__log {
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--shy-surface-sunken);
  border-radius: var(--shy-radius-sm);
  font-family: var(--shy-font-mono);
  font-size: 0.85rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Scrolls on its own rather than pushing the page sideways on a phone. */
.shy-script-runs {
  overflow-x: auto;
}

.shy-script-runs td:last-child {
  min-width: 12rem;
}

.shy-script-runs small {
  color: var(--shy-text-muted);
}

/* A script's own form (scripts/start), e.g. Dye's colorway preview picker. */
.shy-script-form .shy-script-run__actions {
  margin-top: 1rem;
}

.shy-script-pick__note {
  margin: 0 0 0.75rem;
  color: var(--shy-text-muted);
}

.shy-script-pick {
  list-style: none;
  margin: 0;
  padding: 0;
}

.shy-script-pick__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-top: 1px solid var(--shy-border);
}

.shy-script-pick__row:first-child {
  border-top: 0;
}

.shy-script-pick__row--off .shy-script-pick__thumb,
.shy-script-pick__row--off strong {
  opacity: 0.6;
}

.shy-script-pick__move {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.shy-script-pick__move .shy-btn {
  padding: 0 0.5rem;
  line-height: 1.4;
}

.shy-script-pick__start {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.shy-script-pick__product {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex: 1 1 16rem;
  min-width: 0;
}

.shy-script-pick__product input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.shy-script-pick__product small {
  display: block;
  color: var(--shy-text-muted);
}

.shy-script-pick__thumb {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: var(--shy-radius-sm);
  background: var(--shy-surface-alt);
  object-fit: cover;
}

.shy-script-pick__when {
  min-width: 11rem;
  text-align: right;
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .shy-script-pick__when {
    min-width: 0;
    text-align: left;
  }
}