/*
  Workshop items (/js/items/) and the workshop player (/js/pages/workshop.js). The brief reader's
  end-of-brief check uses the same items, so these styles load on every page.

  Colours, spacing, type and motion come from tokens.css. Status colours mark meaning in icons,
  stripes, dots and bar segments; text stays --fg-0 or --fg-1, so it passes 4.5:1 on every surface
  here in both themes (--fg-2 never sits on --bg-3). Motion uses --t-fast and --t-med, which are
  0ms under prefers-reduced-motion, so every transition and animation here stops with them.
*/

/* ---- Player --------------------------------------------------------------------------------- */

.workshop {
  max-width: 1200px;
}

.workshop-eyebrow {
  color: var(--fg-1);
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.workshop-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-5);
  margin-top: var(--s-3);
}

.workshop-count {
  color: var(--fg-0);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.workshop-score {
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

/* The progress strip: one segment per item, filled as each is answered. */
.workshop-strip {
  display: flex;
  gap: var(--s-1);
  margin: var(--s-1) 0 0;
  padding: 0;
  list-style: none;
}

.strip-seg {
  flex: 1 1 0;
  height: 8px;
  border-radius: 4px;
  background-color: var(--bg-3);
  transition: background-color var(--t-med) var(--ease);
}

.strip-seg[data-state="current"] {
  background-color: color-mix(in srgb, var(--accent) 30%, var(--bg-3));
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.strip-seg[data-state="correct"] {
  background-color: var(--ok);
}

.strip-seg[data-state="partial"] {
  background-color: var(--warn);
}

/* A miss is shown, not punished: grey, not red. */
.strip-seg[data-state="wrong"] {
  background-color: var(--fg-2);
}

/* The small celebration for an item right at the first attempt. */
.strip-seg[data-pop] {
  animation: workshop-pop var(--t-med) var(--ease);
}

@keyframes workshop-pop {
  0% { scale: 1 1; }
  50% { scale: 1 1.9; }
  100% { scale: 1 1; }
}

.workshop-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

.workshop-stage {
  min-width: 0;
}

.workshop-stage > * {
  animation: workshop-enter var(--t-med) var(--ease);
}

@keyframes workshop-enter {
  from {
    opacity: 0;
    translate: 0 var(--s-2);
  }
}

.workshop-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
}

.workshop-keys,
.item-keys {
  color: var(--fg-1);
  font-size: var(--fs-0);
}

.workshop-status {
  color: var(--fg-0);
}

.workshop-status:empty {
  display: none;
}

/* Locked, complete, all answered and empty: one card with a heading, a line and links. */
.workshop-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  max-width: 800px;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background-color: var(--bg-1);
  box-shadow: var(--shadow-1);
}

.workshop-empty {
  align-items: stretch;
  padding: 0;
}

.workshop-panel-title {
  font-size: var(--fs-3);
}

.workshop-panel-title:focus-visible {
  outline: none;
}

.workshop-panel-text {
  max-width: var(--measure);
  color: var(--fg-1);
}

.workshop-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* ---- Item frame ------------------------------------------------------------------------------ */

.item {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background-color: var(--bg-1);
  box-shadow: var(--shadow-1);
}

.item-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.item-kind {
  color: var(--fg-1);
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.item-setting {
  color: var(--fg-1);
}

.item-prompt {
  max-width: var(--measure);
  font-size: var(--fs-3);
  line-height: 1.3;
  text-wrap: pretty;
}

/* focus() puts keyboard focus on the heading so a screen reader names the item; it is not a control. */
.item-prompt:focus-visible {
  outline: none;
}

.item-hint {
  max-width: var(--measure);
  color: var(--fg-1);
}

.item-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

.item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
}

.item-message {
  max-width: var(--measure);
  color: var(--fg-0);
}

.item-message:empty {
  display: none;
}

.item-message[data-tone="danger"] {
  color: var(--danger);
  font-weight: 600;
}

/* Markdown in explanations and why texts. */
.item-md > * + * {
  margin-top: 0.6em;
}

.workshop, .brief-check { overflow-wrap: anywhere; }
.item-md { min-width: 0; }
.item-md pre { max-width: 100%; overflow-x: auto; white-space: pre; }
.item-md pre code { white-space: pre; }
.item-md table { display: block; max-width: 100%; overflow-x: auto; }

.item-md ul,
.item-md ol {
  padding-left: 1.25em;
}

/* ---- Choices: single, multi and scenario decisions ------------------------------------------ */

.choices {
  min-width: 0;
}

.choice-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-width: 760px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.choice {
  --tone: var(--fg-2);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background-color: var(--bg-0);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.choice-input {
  margin-top: 3px;
}

.choice-label {
  color: var(--fg-0);
  cursor: pointer;
}

/* The whole row is the target, not just the 16px control. */
.choice-label::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.choice:hover {
  border-color: var(--fg-2);
}

.choice:has(.choice-input:checked) {
  border-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 9%, var(--bg-0));
}

.choice:has(.choice-input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.choice-input:focus-visible {
  outline: none;
}

.choices:disabled .choice-label {
  cursor: default;
}

.choices:disabled .choice-label::before {
  display: none;
}

.choices:disabled .choice:hover {
  border-color: var(--line-strong);
}

.choices:disabled .choice:has(.choice-input:checked):hover {
  border-color: var(--accent);
}

/* After the answer: the mark and the why, under the option's text. */
.choice-after {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-top: var(--s-2);
}

.choice > .choice-after {
  grid-column: 2;
}

.choice-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--fg-0);
  font-size: var(--fs-0);
  font-weight: 600;
}

.choice-mark .icon {
  width: 16px;
  height: 16px;
  color: var(--tone);
  stroke-width: 2.25;
}

.choice-why {
  max-width: var(--measure);
  color: var(--fg-1);
}

:is(.choice, .drill-choice, .spot-line)[data-mark="chosen-correct"],
:is(.choice, .drill-choice, .spot-line)[data-mark="correct"],
.spot-line[data-mark="found"] {
  --tone: var(--ok);
}

:is(.choice, .drill-choice, .spot-line)[data-mark="chosen-wrong"],
.spot-line[data-mark="false-flag"] {
  --tone: var(--danger);
}

.spot-line[data-mark="missed"] {
  --tone: var(--warn);
}

/* Outranks the checked row's accent border, so a chosen option shows its mark. */
.choice-list .choice[data-mark] {
  border-color: color-mix(in srgb, var(--tone) 55%, var(--line));
  box-shadow: inset 3px 0 0 var(--tone);
}

/* ---- Drill ----------------------------------------------------------------------------------- */

.drill {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.drill-timer {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: 760px;
}

.drill-bar {
  position: relative;
  flex: 1 1 auto;
  height: 10px;
  overflow: hidden;
  border-radius: 5px;
  background-color: var(--bg-3);
}

.drill-fill {
  position: absolute;
  inset: 0;
  background-color: var(--accent);
  transform: scaleX(var(--drill-left, 1));
  transform-origin: left center;
  transition: transform var(--t-fast) linear, background-color var(--t-med) var(--ease);
}

.drill-timer[data-low] .drill-fill {
  background-color: var(--warn);
}

.drill-left {
  min-width: 5ch;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

.drill-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  align-items: start;
  gap: var(--s-3);
  max-width: 1040px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.drill-choice {
  --tone: var(--fg-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.drill-option {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  width: 100%;
  min-height: 72px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background-color: var(--bg-0);
  color: var(--fg-0);
  font-weight: 500;
  text-align: left;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.drill-option:hover:not(:disabled) {
  border-color: var(--accent);
}

.drill-option:disabled {
  cursor: default;
}

.drill-option[data-chosen] {
  border-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 9%, var(--bg-0));
}

.drill-choice[data-mark] .drill-option {
  box-shadow: inset 3px 0 0 var(--tone);
}

.drill-key {
  flex: none;
}

.drill-choice > .choice-after {
  margin-top: 0;
  padding: 0 var(--s-1);
}

/* ---- Order ----------------------------------------------------------------------------------- */

.order-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-width: 760px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-step {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background-color: var(--bg-0);
  cursor: grab;
  transition: border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.order-step:hover {
  border-color: var(--fg-2);
}

.order-step.is-dragging {
  opacity: 0.5;
}

.order-step.is-drop-before {
  box-shadow: 0 calc(-1 * var(--s-1)) 0 calc(-1px) var(--accent);
}

.order-step.is-drop-after {
  box-shadow: 0 var(--s-1) 0 calc(-1px) var(--accent);
}

/* Six dots: the step can be dragged. */
.order-grip {
  width: 10px;
  height: 16px;
  background-image: radial-gradient(circle, var(--fg-2) 1.5px, transparent 1.75px);
  background-size: 5px 5.33px;
}

.order-pos {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--bg-2);
  color: var(--fg-0);
  font-size: var(--fs-0);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.order-text {
  color: var(--fg-0);
}

.order-moves {
  display: flex;
  gap: var(--s-1);
}

.order-up {
  rotate: -90deg;
}

.order-down {
  rotate: 90deg;
}

.order-move[aria-disabled="true"] {
  color: var(--line-strong);
  cursor: default;
}

.order-move[aria-disabled="true"]:hover {
  background-color: transparent;
}

.item[data-state="answered"] .order-step,
.item[data-state="pending"] .order-step {
  cursor: default;
}

.fb-order {
  margin: 0;
  padding-left: 1.5em;
  color: var(--fg-0);
}

.fb-order li + li {
  margin-top: var(--s-1);
}

/* ---- Match ----------------------------------------------------------------------------------- */

.match-rows {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-width: 920px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.match-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 24px minmax(0, 3fr);
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background-color: var(--bg-0);
}

.match-left {
  color: var(--fg-0);
  font-weight: 600;
}

.match-joint {
  height: 1px;
  background-color: var(--line-strong);
}

.match-select {
  width: 100%;
  min-width: 0;
}

.fb-pairs {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fb-pairs li {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--s-3);
  color: var(--fg-0);
}

.fb-pair-left {
  font-weight: 600;
}

/* ---- Text ------------------------------------------------------------------------------------ */

.text-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  max-width: 28rem;
}

.text-label {
  color: var(--fg-0);
  font-weight: 600;
}

.text-answer {
  width: 100%;
  font-family: var(--font-mono);
}

.text-answer[readonly] {
  background-color: var(--bg-2);
}

/* ---- Spot the risk --------------------------------------------------------------------------- */

.spot {
  min-width: 0;
}

.spot-lines {
  max-width: 1040px;
  margin: 0;
  padding: var(--s-2) 0;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background-color: var(--bg-2);
  list-style: none;
}

.spot-line {
  --tone: var(--fg-2);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border-left: 3px solid transparent;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.spot-line:hover {
  border-left-color: var(--line-strong);
}

.spot-check {
  margin-top: 4px;
}

.spot-check:focus-visible {
  outline: none;
}

.spot-line:has(.spot-check:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.spot-label {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  min-width: 0;
  cursor: pointer;
}

.spot-label::before {
  content: "";
  position: absolute;
  inset: 0;
}

.spot-n {
  flex: none;
  min-width: 2ch;
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* A listing line, so not the boxed inline-code look. */
.spot-label .spot-text {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-0);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.spot-line:has(.spot-check:checked) {
  border-left-color: var(--warn);
  background-color: color-mix(in srgb, var(--warn) 10%, var(--bg-2));
}

.spot-line[data-mark] {
  border-left-color: var(--tone);
}

.spot-line[data-mark="safe"] {
  border-left-color: transparent;
}

.spot:disabled .spot-label {
  cursor: default;
}

.spot:disabled .spot-label::before {
  display: none;
}

.spot-line > .spot-after {
  grid-column: 2;
  margin: var(--s-1) 0 var(--s-1) calc(2ch + var(--s-3));
}

/* ---- Scenario -------------------------------------------------------------------------------- */

.scenario {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

.scenario-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  align-items: start;
  gap: var(--s-5);
}

@media (max-width: 1280px) {
  .scenario-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.scenario-main {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

.chat {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  max-width: min(600px, 85%);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-3);
  background-color: var(--bg-2);
  animation: workshop-enter var(--t-med) var(--ease);
}

.chat-msg[data-from="them"] {
  align-self: flex-start;
  border-top-left-radius: var(--r-1);
}

.chat-msg[data-from="you"] {
  align-self: flex-end;
  border-top-right-radius: var(--r-1);
  background-color: color-mix(in srgb, var(--accent) 14%, var(--bg-1));
}

.chat-who {
  color: var(--fg-1);
  font-size: var(--fs-0);
  font-weight: 600;
}

.chat-text {
  color: var(--fg-0);
}

.chat-replies {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
}

.chat-reply {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--s-2);
  max-width: min(600px, 90%);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--accent);
  border-radius: var(--r-3);
  background-color: transparent;
  color: var(--fg-0);
  text-align: left;
  transition: background-color var(--t-fast) var(--ease);
}

.chat-reply:hover {
  background-color: color-mix(in srgb, var(--accent) 10%, transparent);
}

.chat-reply-icon {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--accent);
}

.chat-end {
  align-self: center;
  color: var(--fg-1);
  font-style: italic;
}

.scenario-facts {
  position: sticky;
  top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background-color: var(--bg-0);
}

.facts-title {
  font-size: var(--fs-1);
}

.facts-empty {
  color: var(--fg-1);
  font-size: var(--fs-0);
}

.facts-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.facts-item {
  padding: var(--s-1) var(--s-3);
  border-left: 2px solid var(--info);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  color: var(--fg-0);
  transition: background-color var(--t-med) var(--ease);
}

.facts-item[data-fresh] {
  background-color: color-mix(in srgb, var(--info) 10%, transparent);
  animation: workshop-enter var(--t-med) var(--ease);
}

.scenario-decisions {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.scenario-decisions-title {
  font-size: var(--fs-2);
}

.scenario-decisions-title:focus-visible {
  outline: none;
}

.decision {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.decision-prompt {
  max-width: var(--measure);
  color: var(--fg-0);
  font-weight: 600;
}

/* ---- Feedback panel -------------------------------------------------------------------------- */

.item-feedback {
  --tone: var(--fg-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background-color: var(--bg-0);
  box-shadow: inset 3px 0 0 var(--tone);
  scroll-margin: var(--s-5);
}

.item-feedback[data-verdict="correct"] {
  --tone: var(--ok);
}

.item-feedback:is([data-verdict="partial"], [data-verdict="timeout"]) {
  --tone: var(--warn);
}

.item-feedback[data-verdict="wrong"] {
  --tone: var(--danger);
}

.fb-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.fb-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--tone) 16%, transparent);
  color: var(--tone);
}

.fb-icon .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.25;
}

.item-feedback[data-verdict="correct"] .fb-icon {
  animation: feedback-pop var(--t-med) var(--ease);
}

@keyframes feedback-pop {
  0% { scale: 0.6; }
  60% { scale: 1.15; }
  100% { scale: 1; }
}

.fb-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
}

.fb-title {
  font-size: var(--fs-3);
}

.fb-points {
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

.fb-summary {
  max-width: var(--measure);
  color: var(--fg-0);
}

.fb-label {
  color: var(--fg-1);
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fb-explanation,
.fb-answer,
.fb-sources {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.fb-explanation .item-md {
  max-width: var(--measure);
  color: var(--fg-0);
}

.fb-source-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fb-source-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
}

.fb-source-link {
  font-weight: 500;
}

.fb-external {
  width: 14px;
  height: 14px;
  margin-left: var(--s-1);
}

.fb-source-meta {
  color: var(--fg-1);
  font-size: var(--fs-0);
}