/* Workflow (recipe) pages: stepper and step frame. Colours come from the shared tokens in style.css. */
.skip-link { position: absolute; left: -9999px; top: auto; }
.skip-link:focus { position: static; display: inline-block; margin: .25rem 0; padding: .5rem .75rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.id-note { border-left: 3px solid var(--accent); padding: .4rem .7rem; background: var(--panel); border-radius: 0 var(--radius) var(--radius) 0; }
.recipe { margin: 1.25rem 0 2rem; outline: none; }
.recipe .steps { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem; counter-reset: none; }
.recipe .steps li { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: .4rem; min-width: 0; }
.recipe .steps li.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.recipe .steps li.todo { opacity: .75; }
.rc-step { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 44px; text-align: left; background: none; border: 0; padding: .25rem .35rem; color: inherit; font: inherit; }
.rc-step:disabled { opacity: 1; cursor: default; }
.rc-n { flex: none; display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid var(--line); font-weight: 700; font-size: .85rem; background: var(--bg); }
.steps li.active .rc-n { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.steps li.done .rc-n { border-color: var(--ok); color: var(--ok); }
.rc-t { min-width: 0; overflow-wrap: anywhere; font-weight: 600; font-size: .92rem; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem; }
.rc-badge { display: inline-block; font-size: .7rem; font-weight: 600; line-height: 1.4; padding: 0 .4rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.rc-when { flex-basis: 100%; font-weight: 400; font-size: .8rem; }
.steps li.skipped .rc-n { border-style: dashed; color: var(--muted); }
.steps li.skipped .rc-t > span:first-child { color: var(--muted); }
.rc-passed .rc-icon, .rc-passed .rc-thumb { border-style: dashed; }
.rc-file { margin-top: .35rem; display: grid; gap: .35rem; }
.rc-out { display: flex; gap: .5rem; align-items: center; min-width: 0; }
.rc-name { min-width: 0; overflow-wrap: anywhere; }
.rc-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); flex: none; }
.rc-icon { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 4px; border: 1px solid var(--line); font-size: .7rem; font-weight: 700; color: var(--muted); }
.rc-file-actions { gap: .35rem; }
.rc-file-actions button, .rc-actions button { min-height: 44px; }
.rc-stage { padding: .75rem; min-width: 0; }
.rc-top { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; justify-content: space-between; }
.rc-title { font-size: 1.05rem; margin: 0; }
.rc-full { white-space: nowrap; }
.rc-note { margin: .35rem 0; }
.rc-status { min-height: 1.4em; margin: .35rem 0; }
.rc-status.error { color: var(--danger); }
.rc-status.ok { color: var(--ok); }
.rc-bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: .35rem 0; }
.rc-bar > div { height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.rc-frame { margin: 0 -.25rem; }
.recipe-frame { display: block; width: 100%; height: 560px; border: 0; background: var(--bg); }
.rc-actions { margin: .5rem 0 .75rem; gap: .5rem; flex-wrap: wrap; }
.recipe-steps .step-list li { margin-bottom: .75rem; }
.recipe-steps h3 { margin: 0 0 .25rem; font-size: 1rem; }
@media (max-width: 600px) {
  .recipe .steps { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .rc-stage { padding: .5rem; }
  .rc-frame { margin: 0 -.5rem; }
  .rc-actions button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .rc-bar > div { transition: none; } }