/* Workshop Completion.
   Structural only — show the right [data-show] node for the current
   [data-state]. Visual styling lives below.

   data-show accepts a space-separated list of states the element should
   appear in (e.g. data-show='complete complete-approved awaiting'). */

.workshop-completion [data-show] {
	display: none;
}

.workshop-completion[data-state='pending']            [data-show~='pending'],
.workshop-completion[data-state='pending-checkpoint'] [data-show~='pending-checkpoint'],
.workshop-completion[data-state='saving']             [data-show~='saving'],
.workshop-completion[data-state='awaiting']           [data-show~='awaiting'],
.workshop-completion[data-state='complete']           [data-show~='complete'],
.workshop-completion[data-state='complete-approved']  [data-show~='complete-approved'] {
	display: revert;
}

/* Add visual rules below — .heading / .subtitle / .toggle / .form / .follow-up etc. */


.workshop-completion {

   .heading {

   }

   .subtitle {

   }

   .actions {
      margin-top: 1.5em;
   }

   .completion-status {

   }

   .completion-status.complete {

   }

   .completion-status.awaiting {

   }

}


/* workshop-status-banner — top-of-page banner showing completion state.
   completion-banner — the box inside the banner. */

.workshop-status-banner {
	border-top: 2px solid black;
	border-bottom: 2px solid black;
	padding: 20px 0;
}

.completion-banner {
	padding: 15px 20px;
	border: 2px solid black;
	text-align: center;

	&.complete {
		background: black;
		color: white;
	}

	&.awaiting {
		border-style: dashed;
	}
}