/* Making a project.
   =======================================================================
   A page, not a dialog. The pack's own figures: a warm off-white ground,
   brand orange #FF6334, a colour per world, 14–16px corners, 44px minimum
   for anything you can press, and about 1120px of content in the middle.

   The accent is a variable set from script when a type is chosen, so one
   set of rules paints four worlds and adding a fifth is a colour rather
   than a stylesheet. */

.wizard {
  --accent: #ff6334;
  --wizard-width: 1120px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: var(--surface-0, #faf7f4);
}
.wizard[hidden] { display: none; }

/* ------------------------------------------------------------- the head */

.wizard-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line, #e6e1db);
}
.wizard-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  min-height: 44px;
  padding: 0 14px 0 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink, #1c1c22);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.wizard-back:hover { background: rgb(0 0 0 / .05); }
.wizard-back svg { width: 20px; height: 20px; }

.wizard-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wizard-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted, #6b6b74);
  font-size: 15px;
  font-weight: 600;
}
/* The rule between steps, drawn rather than an element: it belongs to the
   gap and not to either step. */
.wizard-step + .wizard-step::before {
  content: "";
  width: 96px;
  height: 1px;
  margin: 0 16px;
  background: var(--line, #e6e1db);
}
.wizard-step-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1.5px solid var(--line, #d8d2cb);
  border-radius: 50%;
  font-size: 14px;
}
.wizard-step.is-current { color: var(--accent-ink, var(--accent)); }
.wizard-step.is-current .wizard-step-mark {
  border-color: var(--accent);
  color: var(--accent-ink, var(--accent));
}
.wizard-step.is-done { color: var(--ink, #1c1c22); }
.wizard-step.is-done .wizard-step-mark {
  border-color: var(--accent);
  color: var(--accent-ink, var(--accent));
}

/* ------------------------------------------------------------ the middle */

.wizard-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 40px 24px 24px;
}
.wizard-panel {
  width: min(var(--wizard-width), 100%);
  margin: 0 auto;
}
.wizard-panel[hidden] { display: none; }
.wizard-panel h1 {
  margin: 0;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--ink, #16161a);
}
.wizard-lede {
  margin: 12px 0 32px;
  text-align: center;
  font-size: 16px;
  color: var(--muted, #6b6b74);
}

/* ------------------------------------------------------ step one: cards */

/* All five worlds on one line.
 *
 * It was four columns for five project types, so 3D Design dropped onto a
 * row of its own and choosing it meant scrolling to find it — the last
 * option looked like an afterthought rather than one of the five. Five
 * columns, and the card scales down to fit rather than the row breaking. */
.type-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 20px);
}
.type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, .7vw, 10px);
  min-height: 44px;
  /* Scales with the window so five fit where four used to. The art's
     negative margin below tracks the same value, or the picture stops
     reaching the card's edges. */
  --type-card-pad: clamp(12px, 1.4vw, 22px);
  padding: var(--type-card-pad) var(--type-card-pad)
           calc(var(--type-card-pad) * .82);
  border: 1px solid var(--line, #e6e1db);
  border-radius: 16px;
  background: var(--surface-1, var(--surface-1));
  color: var(--ink, #1c1c22);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms, box-shadow 120ms, background 120ms;
}
.type-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-1)); }
.type-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Selection is a border, a tint AND a tick — never colour alone, which a
   learner who cannot separate orange from grey would have to guess at. */
.type-card[aria-checked="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-1));
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.type-card-tick {
  position: absolute;
  top: 14px;
  right: 14px;
  display: none;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.type-card[aria-checked="true"] .type-card-tick { display: grid; }
/* The art is the card's top edge, not a badge sitting in the middle of it.
 * These are photographs of the real robot and the real board now, and a
 * photograph shown at 76px in the middle of a white panel is a smudge. */
.type-card-art {
  display: grid;
  place-items: stretch;
  /* Proportional, not 132px. A fixed height against a card that is a
     quarter of the width on a laptop and the whole of it on a small screen
     made the same picture a 1.9:1 letterbox in one place and a 3.5:1 slot in
     the other — and at 3.5:1 `cover` cut the robot in half. */
  height: auto;
  aspect-ratio: 16 / 10;
  margin: calc(var(--type-card-pad) * -1) calc(var(--type-card-pad) * -1) 4px;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-1));
  color: var(--accent-ink, var(--accent));
}
.type-card-art svg { width: 118px; height: 88px; }
.type-card-name {
  font-size: clamp(15px, 1.15vw, 20px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent-ink, var(--accent));
}
.type-card-blurb {
  font-size: clamp(12px, .85vw, 14px);
  line-height: 1.35;
  color: var(--muted, #6b6b74);
  /* No fixed floor. 40px of reserved space per card is a whole line of
     nothing on a narrow window, and it was pushing the row taller than the
     screen before the columns ever needed to break. */
  min-height: 0;
}
.type-card-choose {
  margin-top: auto;
  padding-top: clamp(8px, 1vw, 14px);
  font-size: clamp(12px, .85vw, 14px);
  border-top: 1px solid var(--line, #efe9e2);
  color: var(--accent-ink, var(--accent));
  font-size: 14px;
  font-weight: 650;
}

/* ------------------------------------------------------ step two: setup */

.wizard-kind {
  display: flex;
  justify-content: center;
  margin: 0 0 14px;
}
.wizard-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--surface-1));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-1));
  color: var(--accent-ink, var(--accent));
  font-size: 15px;
  font-weight: 700;
}
.wizard-chip-art { display: grid; place-items: center; }
.wizard-chip-art svg { width: 24px; height: 20px; }

.setup-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .95fr);
  gap: 24px;
  margin-top: 26px;
}
.setup-form,
.setup-summary {
  padding: 22px;
  border: 1px solid var(--line, #e6e1db);
  border-radius: 16px;
  background: var(--surface-1, var(--surface-1));
}
.setup-summary { background: color-mix(in srgb, var(--accent) 5%, var(--surface-1)); }

.setup-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
}
.setup-name {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  background: var(--surface-1, var(--surface-1));
  color: var(--ink, #1c1c22);
  font: inherit;
  font-size: 17px;
}
.setup-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.setup-group { margin: 22px 0 0; padding: 0; border: 0; }
.setup-group legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
}
.setup-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.setup-group-wrap .setup-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.setup-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 16px 12px 14px;
  border: 1px solid var(--line, #e6e1db);
  border-radius: 14px;
  background: var(--surface-1, var(--surface-1));
  color: var(--ink, #1c1c22);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.setup-option:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-1));
}
.setup-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.setup-option[aria-checked="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-1));
  box-shadow: 0 0 0 1px var(--accent) inset;
}
/* A type that waits for a sign-in: still a card, still readable, and it
   says so — a greyed picture with no words is a broken card. */
.type-card.is-locked {
  cursor: default;
  border-style: dashed;
  color: var(--muted, #6b6b74);
}
.type-card.is-locked .type-card-picture { opacity: .5; filter: grayscale(.6); }
.type-card.is-locked .type-card-choose { display: none; }
.type-card-badge {
  align-self: flex-start;
  margin-top: 2px;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #ff6334 14%, var(--surface-1));
  color: #c2410c;
  font-size: 12px;
  font-weight: 700;
}
.type-card-badge::before {
  content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.35em;
  vertical-align: -0.15em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 7V5a4 4 0 018 0v2h1a1 1 0 011 1v6a1 1 0 01-1 1H3a1 1 0 01-1-1V8a1 1 0 011-1h1zm2 0h4V5a2 2 0 00-4 0v2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 7V5a4 4 0 018 0v2h1a1 1 0 011 1v6a1 1 0 01-1 1H3a1 1 0 01-1-1V8a1 1 0 011-1h1zm2 0h4V5a2 2 0 00-4 0v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-theme="dark"] .type-card-badge { color: #ffb08a; }

.setup-option:disabled {
  background: var(--surface-2, #f4f1ed);
  color: var(--muted, #97929b);
  cursor: default;
}
.setup-option-art { display: grid; place-items: center; height: 34px; }
.setup-option-art svg { width: 40px; height: 32px; }
.setup-option-name { font-size: 15px; font-weight: 650; }
.setup-option-blurb { font-size: 12.5px; color: var(--muted, #6b6b74); }
.setup-option-badge {
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #ff6334 14%, var(--surface-1));
  color: #c2410c;
  font-size: 12px;
  font-weight: 700;
}
.setup-option-tick {
  position: absolute;
  top: 10px;
  right: 10px;
  display: none;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.setup-option[aria-checked="true"] .setup-option-tick { display: grid; }

.setup-said {
  display: block;
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-1));
  color: var(--ink, #3a3a42);
  font-size: 14px;
}
.setup-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e6e1db);
  border-radius: 12px;
  font-size: 14.5px;
  cursor: pointer;
}
.setup-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.setup-note {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--muted, #6b6b74);
}

/* ------------------------------------------------------- the summary */

.setup-summary h2 {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 750;
}
.summary-art {
  display: grid;
  place-items: center;
  height: 150px;
  color: var(--accent);
}
.summary-art svg { width: 170px; height: 128px; }
.summary-rows {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  margin: 10px 0 0;
}
.summary-rows dt,
.summary-rows dd {
  margin: 0;
  padding: 13px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 16%, var(--surface-1));
  font-size: 14.5px;
}
.summary-rows dt { color: var(--muted, #6b6b74); }
.summary-rows dd { text-align: right; font-weight: 650; }
.summary-note {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--muted, #6b6b74);
}

/* ------------------------------------------------------ step three */

.wizard-creating { padding-top: 60px; text-align: center; }

/* -------------------------------------------------------- the actions */

.wizard-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  border-top: 1px solid var(--line, #e6e1db);
  background: var(--surface-1, var(--surface-1));
}
.wizard-hint {
  flex: 1 1 auto;
  margin: 0;
  font-size: 14px;
  color: var(--muted, #6b6b74);
}
.wizard-hint.is-problem { color: #c2410c; font-weight: 600; }
.wizard-buttons { display: flex; gap: 12px; }
.wizard-actions .primary-button,
.wizard-actions .secondary-button {
  min-height: 48px;
  padding: 0 26px;
  border-radius: 12px;
  font-size: 15.5px;
}
.wizard-actions .primary-button { background: var(--accent); border-color: var(--accent); }
.wizard-actions .primary-button:disabled { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------------------ narrower */

/* Below this the five stop fitting and break in sensible steps rather than
   shrinking until the words are unreadable.
   The first break is at 860 rather than 1080 so a tablet in landscape —
   1024 wide, which is the machine this is used on — still gets all five in
   the one line it was asked for. */
@media (max-width: 860px) {
  .type-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
  .setup-columns { grid-template-columns: minmax(0, 1fr); }
  .setup-group-wrap .setup-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .type-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .type-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 799px) {
  .wizard-panel h1 { font-size: 30px; }
  .wizard-step + .wizard-step::before { width: 28px; margin: 0 8px; }
  .wizard-step-name { display: none; }
  .wizard-actions { flex-wrap: wrap; }
  .wizard-hint { flex: 1 1 100%; order: 2; }
}

/* ------------------------------------------- the hub's own type badges */

.strip-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.strip-head .strip-title { margin-right: auto; }
.strip-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.strip-chip {
  --accent: #ff6334;
  --accent-ink: #a83309;
  --accent-on: #12100e;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line, #e6e1db);
  border-radius: 999px;
  background: var(--surface-1, var(--surface-1));
  color: var(--ink, #1c1c22);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.strip-chip:hover { border-color: var(--accent); }
.strip-chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  /* Not #fff. The chip's fill IS the accent, so its label contrasts with
     the accent and not with the page — white on brand orange is 2.96:1. */
  color: var(--accent-on, #12100e);
}
.strip-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.strip-none {
  align-self: center;
  margin: 0;
  color: var(--muted, #6b6b74);
  font-size: 14px;
}

/* The world a card belongs to, over its picture. */
.project-card { position: relative; }
.type-badge {
  --accent: #ff6334;
  --accent-ink: #a83309;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 4px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-1));
  /* 11px of the raw brand orange on its own pale wash is 2.49:1. The badge
     naming a project's world was the least readable text on the hub. */
  color: var(--accent-ink, var(--accent));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.type-badge[hidden] { display: none; }

/* ------------------------------------------- the supplied artwork (v2) */

.type-card-icon { width: 76px; height: 76px; }
/* `cover`, because the four are not one shape: two are 3:2 photographs and
 * two are 16:10 drawings, and letterboxing them would give each card a
 * different amount of white above the name. */
.type-card-picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wizard-chip-icon { width: 22px; height: 22px; }
.setup-option-picture { width: 40px; height: 40px; }
.setup-option-art.is-wide { height: auto; }
.setup-option-art.is-wide .setup-option-picture {
  width: 100%;
  max-width: 190px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 10px;
}
/* A board drawn rather than photographed sits on the same soft ground the
   Xplore board's photograph has, so the row of cards reads as one set. */
.setup-option-art.is-wide .setup-option-picture.is-drawing {
  box-sizing: border-box;
  padding: 14px;
  background: var(--surface-2, #f1eeea);
}
.summary-picture {
  width: 100%;
  max-width: 260px;
  height: auto;
  object-fit: contain;
}
.creating-art { display: grid; place-items: center; margin-bottom: 18px; }
.creating-art img { width: 200px; height: auto; }
.creating-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
.creating-actions[hidden] { display: none; }
.creating-actions .primary-button,
.creating-actions .secondary-button {
  min-height: 48px;
  padding: 0 26px;
  border-radius: 12px;
  font-size: 15.5px;
}
.creating-actions .primary-button {
  background: var(--accent);
  border-color: var(--accent);
}

/* ------------------------------------------------- what you can do to a card

   Archive, delete, rename, duplicate and export all existed already and all
   of them lived inside the project they acted on — so archiving meant
   loading a whole workbench to press one button, and a project too broken
   to open could not be deleted at all. The button is here; the menu itself
   is one element at the top of the page, because a menu inside a card is
   clipped by the strip that scrolls the cards sideways. */

.card-more {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-1) 82%, transparent);
  color: #3c3c46;
  cursor: pointer;
  /* Held back until the card is hovered or something in it has focus, so a
     row of cards is a row of projects rather than a row of buttons — but
     never hidden from a keyboard or a touch screen, where there is no
     hover to reveal it with. */
  opacity: 0;
  transition: opacity .15s, background-color .15s;
}
.card-more svg { width: 18px; height: 18px; fill: currentColor; }
.project-card:hover .card-more,
.project-card:focus-within .card-more,
.card-more:focus-visible,
.card-more[aria-expanded="true"] { opacity: 1; }
.card-more:hover { background: #fff; }
.card-more:focus-visible { outline: 2px solid var(--accent, #ff6334); outline-offset: 2px; }

@media (hover: none) {
  /* No hover to reveal it with. */
  .card-more { opacity: 1; }
}

.card-menu {
  position: fixed;
  z-index: 60;
  min-width: 208px;
  padding: 6px;
  border: 1px solid var(--line, #e6e6ec);
  border-radius: 14px;
  background: var(--surface, var(--surface-1));
  box-shadow: 0 18px 44px rgb(16 13 11 / .18);
}
.card-menu[hidden] { display: none; }

.card-menu-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink, #100d0b);
  font: inherit;
  font-size: .9rem;
  text-align: left;
  cursor: pointer;
}
.card-menu-item:hover, .card-menu-item:focus-visible {
  background: var(--orange-soft, #fdece5);
  outline: none;
}
/* Set apart from everything above it, because the two actions that change
   what exists should not sit flush against "Open". */
.card-menu-item[data-separated="true"] {
  margin-top: 6px;
  padding-top: 13px;
  border-top: 1px solid var(--line, #e6e6ec);
  border-radius: 0 0 9px 9px;
}
.card-menu-item[data-danger="true"] { color: #b42318; }
.card-menu-item[data-danger="true"]:hover,
.card-menu-item[data-danger="true"]:focus-visible { background: #fee4e2; }

/* ------------------------------------------------- a colour per project kind

   These were set inline from `project-wizard.js`, which meant they could
   not respond to the theme: an inline style outranks every stylesheet rule.
   The five colours were chosen against a white card, and on the dark one
   the blue and the two purples landed at about 3:1 — readable as a heading,
   not as the 14px "Choose" underneath it.

   So each kind names its accent twice: the drawn colour on light, and a
   lifted version of the same hue on dark. Lifted rather than replaced —
   Scratch stays purple and Electronics stays blue, because the colour is
   how a learner recognises the card before reading it. */
.type-card[data-type="robotics"], .wizard-chip[data-type="robotics"],
.wizard[data-type="robotics"], [data-type="robotics"] { --accent: #ff6334; }
.type-card[data-type="electronics"], .wizard-chip[data-type="electronics"],
.wizard[data-type="electronics"], [data-type="electronics"] { --accent: #2f61e8; }
.type-card[data-type="scratch"], .wizard-chip[data-type="scratch"],
.wizard[data-type="scratch"], [data-type="scratch"] { --accent: #7d3aed; }
.type-card[data-type="ai"], .wizard-chip[data-type="ai"],
.wizard[data-type="ai"], [data-type="ai"] { --accent: #9345b8; }
.type-card[data-type="design"], .wizard-chip[data-type="design"],
.wizard[data-type="design"], [data-type="design"] { --accent: #0f9f98; }

:root[data-theme="dark"] [data-type="robotics"] { --accent: #ff8654; }
:root[data-theme="dark"] [data-type="electronics"] { --accent: #7ba4ff; }
:root[data-theme="dark"] [data-type="scratch"] { --accent: #b98cff; }
:root[data-theme="dark"] [data-type="ai"] { --accent: #d69bec; }
:root[data-theme="dark"] [data-type="design"] { --accent: #35c9c1; }


/* ------------------------------------------------------ accent, as TEXT

   A colour can be right as a fill and wrong as a letter. Brand orange on
   white is 2.96:1 and the design teal is 3.26:1 — both fine as a 4px border
   or a button fill, where 3:1 is the bar, and both below the 4.5:1 that
   14px type needs. This was already true before dark mode existed; the
   wizard was painting "Robotics" and "Choose" in a colour nobody with
   ordinary eyesight reads comfortably on a white card.

   So text uses `--accent-ink` and everything else keeps `--accent`. On
   light the two orange-ish hues darken; on dark the lifted accents already
   clear 4.5:1, so text and fill are the same colour again. */
/* The fallback first: source order decides between rules of equal
   specificity, and a default written last silently wins over every
   type it was meant to stand in for. */
.wizard, .wizard-shell { --accent-ink: #b8460f; --accent-on: #12100e; }
[data-type="robotics"] { --accent-ink: #b8460f; }
[data-type="design"] { --accent-ink: #0b7c76; }
[data-type="electronics"] { --accent-ink: #2f61e8; }
[data-type="scratch"] { --accent-ink: #6d28d9; }
[data-type="ai"] { --accent-ink: #863fa8; }

:root[data-theme="dark"] [data-type="robotics"] { --accent-ink: #ff8654; }
:root[data-theme="dark"] [data-type="electronics"] { --accent-ink: #7ba4ff; }
:root[data-theme="dark"] [data-type="scratch"] { --accent-ink: #b98cff; }
:root[data-theme="dark"] [data-type="ai"] { --accent-ink: #d69bec; }
:root[data-theme="dark"] [data-type="design"] { --accent-ink: #35c9c1; }
:root[data-theme="dark"] .wizard, :root[data-theme="dark"] .wizard-shell {
  --accent-ink: #ff8654;
}

/* ------------------------------------------- three things a token cannot fix

   A LABEL ON A COLOURED FILL cannot follow the theme's ink: the fill is the
   accent, so the label has to contrast with the ACCENT rather than with the
   page. The tick is white on a mid accent, which works while the accent is
   dark — and the lifted dark-theme accents are pale, so white on white. The
   fix is to pick the label from the fill, which `color-contrast()` cannot
   do portably yet, so it is stated per theme. */
/* Same reason, the other way round. What goes ON the accent depends on the
   accent, not on the page: black on orange reads (6.36:1) and black on the
   Scratch and AI purples does not (3.42:1). And on dark every accent is a
   LIFTED one — pale by construction, so white on it is the failing case
   there (2.15:1) and dark ink is the right label for all five.

   `--accent-on` is that choice, stated where the accent is stated. */
[data-type="robotics"] { --accent-on: #12100e; }
[data-type="design"] { --accent-on: #12100e; }
[data-type="electronics"] { --accent-on: #ffffff; }
[data-type="scratch"] { --accent-on: #ffffff; }
[data-type="ai"] { --accent-on: #ffffff; }
:root[data-theme="dark"] [data-type],
:root[data-theme="dark"] .wizard,
:root[data-theme="dark"] .wizard-shell { --accent-on: #12100e; }

.wizard-actions .primary-button { color: var(--accent-on, #12100e); }
.type-card-tick, .setup-option-tick { color: var(--accent-on, #ffffff); }

/* A WARNING IS NOT AN ACCENT. #c2410c is a burnt orange chosen against
   white — 4.03:1 on the dark panel, and 4.45:1 even on its own pale wash,
   both under the 4.5 that 12px type needs. It has to lighten on dark and
   darken on light rather than stay one colour. */
.wizard-hint.is-problem { color: #a83309; }
.setup-option-badge { color: #a83309; }
:root[data-theme="dark"] .wizard-hint.is-problem,
:root[data-theme="dark"] .setup-option-badge {
  color: #ff9a6b;
}
:root[data-theme="dark"] .card-menu-item[data-danger="true"] { color: #ff9d94; }

/* The hub's chips and badges on dark: the untyped default is a darkened
   orange chosen for a white page, which disappears on a dark one. */
:root[data-theme="dark"] .strip-chip,
:root[data-theme="dark"] .type-badge { --accent-ink: #ff8654; }

/* An inline-SVG mark on a setup card, where the option's colour is drawn
 * from the thing itself rather than being a fixed picture file. */
.setup-option-mark,
.setup-mark-plain {
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}

.setup-mark-plain { color: var(--muted, #6b6b74); }