/* The 3D Design workbench.
 *
 * Its own stylesheet rather than more of styles.css, for the same reason it
 * is its own folder: the workbench is a second application inside this one —
 * a toolbar, a browser, a viewport and a property panel that share nothing
 * with the block editor except the header above them.
 *
 * Measurements come from the handoff package's design tokens and the 1600 ×
 * 1000 reference screens: a 272 px browser, a 310–320 px context panel, and
 * tools of about 72–84 × 72–80 px. They are written here as the numbers they
 * are rather than derived, because the screens are the specification.
 */

.design-view {
  --design-teal: #0F9F98;
  /* The same colour cannot be both a fill and a letter. #0F9F98 is right as
     a button and 3.03:1 as 13px text on the pale wash beside it, so text
     uses --design-teal-ink and fills keep --design-teal. */
  --design-teal-ink: #0a6d68;
  --design-on-teal: #08201f;
  --design-teal-soft: #10312f;
  --design-orange: #FF5A1F;
  /* Pointed at the app's tokens rather than written out again, so the
     workbench follows the theme instead of staying the light panel it was
     drawn as. The viewport keeps a colour of its own — a 3D view needs to
     read as a different KIND of surface from the panels around it, and on
     dark that is a lighter slate rather than a darker one. */
  --design-ink: var(--ink);
  --design-muted: var(--muted);
  --design-line: var(--line);
  --design-line-2: var(--surface-2);
  --design-panel: var(--panel);
  --design-viewport: #151d2c;
  --design-dark: #232831;

  /* The workspace concept's palette, by its own names. Tools, browser
     rows and history cards are coloured by what they DO — everything that
     creates is orange, everything that builds is blue, everything that
     takes material away is red — so a learner can find a family before
     they are reading labels. See icons.js, which holds the same values
     for the SVG art that cannot read a CSS variable. */
  --x-orange: #FF6B35;
  --x-blue: #3B82F6;
  --x-purple: #8B5CF6;
  --x-teal: #14B8A6;
  --x-amber: #F59E0B;
  --x-green: #22C55E;
  --x-red: #EF4444;
  --x-slate: #667085;
  /* The pale wash each one takes when it fills a row or a card. Written
     out rather than mixed at runtime: `color-mix` on a variable inside a
     gradient is where this stopped working in Safari. */
  --x-orange-soft: #FFF1EA;
  --x-blue-soft: #EAF4FF;
  --x-purple-soft: #F3EEFF;
  --x-teal-soft: #E9FBF8;
  --x-amber-soft: #FFF8E5;
  --x-green-soft: #ECFDF3;
  --x-red-soft: #FFF0F0;
  --x-green-ink: #16803D;

  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* And ONE column that cannot grow past the window.
     Without it the grid's implicit column is sized to its widest item, and
     the toolbar is ten tools wide — about 1130px. Everything below it then
     stretched to match, so on a tablet the viewport was 1130px inside a
     768px window and a third of the drawing was off the side of the
     screen. The toolbar scrolls sideways on its own; the workbench must
     not. */
  grid-template-columns: minmax(0, 1fr);
  /* The full height of the cell it is given, not the height of its contents.
     Without it the toolbar and the status bar size the view between them and
     the viewport gets whatever is left — which was 232 px of a 900 px
     window, and a canvas that reported itself as correct while showing a
     letterbox. `.ai-view` takes its height the same way. */
  height: 100%;
  min-height: 0;
  background: var(--design-panel);
  color: var(--design-ink);
}
.design-view[hidden] { display: none; }

/* ------------------------------------------------------------- toolbar */

.design-toolbar {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 6px 10px;
  border-bottom: 1px solid var(--design-line);
  background: var(--design-panel);
}

/* The two colours that cannot just follow a token. A wash and a viewport
   both need a dark COUNTERPART rather than an inversion: flipping a pale
   tint to a pale-dark one leaves text on it unreadable either way. */
:root[data-theme="light"] .design-view {
  --design-viewport: #EEF2F6;
  --design-teal-soft: #E8FAF8;
}

:root[data-theme="dark"] .design-view {
  /* On the dark wash the teal has room to stay bright. */
  --design-teal-ink: #35c9c1;
  /* The family colours keep their hue and lose their paper. A pale wash
     printed on a dark panel is a light rectangle with dark text in it,
     which is the one thing a dark theme must not do — so the washes
     become tints OF the panel rather than tints of white. */
  --x-orange-soft: #3a2016;
  --x-blue-soft: #16243c;
  --x-purple-soft: #241d3d;
  --x-teal-soft: #10302d;
  --x-amber-soft: #33280d;
  --x-green-soft: #12301f;
  --x-red-soft: #351a1a;
  --x-green-ink: #58d68d;
}


/* Which workspace, and which mode inside it. Dark in Solid mode and teal in
   Sketch mode, because "am I drawing or am I modelling?" is the one thing a
   learner must never have to work out from the toolbar's contents. */
.design-mode {
  display: grid;
  place-content: center;
  gap: 2px;
  min-width: 168px;
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--design-dark);
  color: #ffffff;
  text-align: center;
}
.design-view[data-mode="sketch"] .design-mode {
  background: var(--design-teal-soft);
  color: var(--design-teal-ink, var(--design-teal));
}
.design-mode-title { font-size: .78rem; font-weight: 800; letter-spacing: .06em; }
.design-mode-sub { font-size: .82rem; font-weight: 600; opacity: .82; }

.design-tools {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  /* Scrolls on a tablet rather than wrapping or shrinking the buttons: a
     72 px touch target that becomes 40 px to fit is not a touch target. */
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 0 8px;
}

/* Every tool carries an icon AND a word. Tooltips alone are unusable on a
   tablet and unlearnable for a beginner — spec §3.2. */
.design-tool {
  display: grid;
  place-items: center;
  gap: 4px;
  flex: 0 0 auto;
  /* Sized so the whole row fits a laptop without scrolling. Thirteen tools
     at the old 78 px came to 1094 px, which overflowed a 1440 px window
     once the Finish button and the undo pair had taken their share — so
     the last tool sat under the orange button and could not be pressed.
     Touch keeps the bigger target: see the coarse-pointer rule below. */
  width: 64px;
  min-height: 60px;
  padding: 6px 3px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  color: var(--design-ink);
  font: inherit;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.15;
  cursor: pointer;
}
.design-tool svg { width: 22px; height: 22px; }

/* A finger needs a bigger target than a pointer does, and shrinking one to
   fit more tools on a tablet would be the wrong trade — a tablet has the
   room, it is the laptop that does not. */
@media (pointer: coarse) {
  .design-tool { width: 76px; min-height: 70px; font-size: .78rem; }
  .design-tool svg { width: 26px; height: 26px; }
}
.design-tool:hover:not(:disabled) { background: #F4F6F9; }
.design-tool:focus-visible { outline: 2px solid var(--design-teal); outline-offset: -2px; }
/* The chosen tool takes its own family's colour rather than one house
   colour. A blue ring round Extrude and a red one round Cut says which
   KIND of thing is in hand, which the reference screens lean on hard. */
.design-tool[aria-pressed="true"] {
  border-color: var(--tool-colour, var(--design-teal));
  background: var(--tool-soft, var(--design-teal-soft));
  color: var(--tool-colour, var(--design-teal-ink));
}
.design-tool:disabled { opacity: .38; cursor: default; }

/* ------------------------------------------------------- tool families
 *
 * A coloured rule under each run with the family's name below it. The
 * rule is the whole width of the run and sits under the buttons, exactly
 * as the concept draws it — it is a label for the group, not a border on
 * the last tool in it, which is what the old single divider was. */
.design-group {
  display: grid;
  grid-template-rows: auto auto;
  gap: 3px;
  flex: 0 0 auto;
  padding: 0 6px;
}
.design-group-tools { display: flex; align-items: stretch; gap: 0; }
.design-group-name {
  justify-self: center;
  padding-top: 3px;
  border-top: 3px solid var(--group-colour, var(--design-line));
  width: 100%;
  text-align: center;
  color: var(--group-colour, var(--design-muted));
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .09em;
}
.design-group[data-colour="orange"] { --group-colour: var(--x-orange); }
.design-group[data-colour="blue"] { --group-colour: var(--x-blue); }
.design-group[data-colour="purple"] { --group-colour: var(--x-purple); }
.design-group[data-colour="teal"] { --group-colour: var(--x-teal); }
.design-group[data-colour="amber"] { --group-colour: var(--x-amber); }
.design-group[data-colour="green"] { --group-colour: var(--x-green); }

/* Every tool carries its own colour, so the pressed state above and the
   browser rows below can both reach for it. */
.design-tool[data-colour="orange"] { --tool-colour: var(--x-orange); --tool-soft: var(--x-orange-soft); }
.design-tool[data-colour="blue"] { --tool-colour: var(--x-blue); --tool-soft: var(--x-blue-soft); }
.design-tool[data-colour="purple"] { --tool-colour: var(--x-purple); --tool-soft: var(--x-purple-soft); }
.design-tool[data-colour="teal"] { --tool-colour: var(--x-teal); --tool-soft: var(--x-teal-soft); }
.design-tool[data-colour="amber"] { --tool-colour: var(--x-amber); --tool-soft: var(--x-amber-soft); }
.design-tool[data-colour="green"] { --tool-colour: var(--x-green); --tool-soft: var(--x-green-soft); }
.design-tool[data-colour="red"] { --tool-colour: var(--x-red); --tool-soft: var(--x-red-soft); }
.design-tool[data-colour="slate"] { --tool-colour: var(--x-slate); --tool-soft: #F1F5F9; }

.design-toolbar-end { display: flex; align-items: center; gap: 4px; }
.design-icon-button {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 0; border-radius: 10px;
  background: none; color: var(--design-muted);
  cursor: pointer;
}
.design-icon-button svg { width: 18px; height: 18px; }
.design-icon-button:hover:not(:disabled) { background: #F4F6F9; color: var(--design-ink); }
.design-icon-button:disabled { opacity: .35; cursor: default; }

/* Finish sketch is pinned and orange: it is the one action that gets a
   learner out of sketch mode, and it must be reachable at every width. */
.design-finish {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0 16px;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--design-orange);
  /* Black on orange, 6.36:1 — not the teal pairing. */
  color: #12100e;
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
}

/* ---------------------------------------------------------------- body */

.design-body {
  display: grid;
  /* The concept's Browser is 320–370 px on desktop and 220–240 on a
     compact tablet, because a row has six things on it and a name that
     truncates to "Sketc…" is a name nobody can tell from the next one.
     Narrow enough at the small end that the canvas keeps its 520 px. */
  grid-template-columns: clamp(232px, 24vw, 330px) minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}
.design-body:has(.design-panel:not([hidden])) {
  grid-template-columns: clamp(232px, 22vw, 300px) minmax(0, 1fr) 300px;
}
/* No empty right column when nothing is being edited — spec §4.1. */

.design-browser {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  border-right: 1px solid var(--design-line);
  background: var(--design-panel);
}
.design-browser-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--design-line-2);
  color: var(--design-muted);
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
}
.design-browser-fold {
  border: 0; background: none; color: var(--design-muted);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.design-tree { overflow: auto; padding: 8px 6px; }

/* One row, six things, always in the same places — the concept's row
   anatomy. A learner who has learned one row has learned all of them. */
.design-node {
  display: flex; align-items: center; gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 4px;
  border: 0; border-radius: 8px;
  background: none; color: var(--design-ink);
  font: inherit; font-size: .88rem; font-weight: 600;
  text-align: left; cursor: pointer;
}
.design-node-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.design-node-icon { flex: 0 0 auto; width: 19px; height: 19px; }
/* A pill, not a bare number: it is a count OF something, and the concept
   draws it as a badge so it does not read as part of the name. */
.design-node-count {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 11px;
  background: var(--design-line-2, #F1F5F9);
  color: var(--design-muted);
  font-size: .72rem;
  font-weight: 800;
  text-align: center;
}
/* What the panel is for, in one line, at the foot of it. */
.design-tree-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 4px 6px;
  padding: 11px 13px;
  border-radius: 13px;
  background: var(--design-line-2, #F8FAFC);
  font-size: .74rem;
  line-height: 1.45;
}
.design-tree-note div { display: grid; min-width: 0; }
.design-tree-note strong { color: var(--design-ink); font-size: .78rem; font-weight: 800; }
.design-tree-note span { color: var(--design-muted); }
.design-tree-note-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 1.5px solid var(--x-blue);
  border-radius: 50%;
  color: var(--x-blue);
  font-size: .76rem;
  font-weight: 800;
}

.design-node-note { padding: 2px 10px 8px 58px; color: var(--design-muted); font-size: .8rem; }

/* The chevron is its own button, so opening a folder and selecting what
   is inside it are two different presses. */
.design-node-twist {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--design-muted);
  cursor: pointer;
}
.design-node-twist.is-empty { cursor: default; }
.design-node-twist svg {
  width: 13px; height: 13px;
  transition: transform 140ms ease;
}
.design-node-twist[data-open="true"] svg { transform: rotate(90deg); }
.design-node-twist:disabled { opacity: .35; cursor: default; }

/* ------------------------------------------------------------ viewport */

.design-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--design-viewport); }
.design-canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.design-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 24px;
  pointer-events: none;
}
.design-overlay > * { pointer-events: auto; }

/* The one clear next action — spec §3.3. */
.design-invite {
  display: grid; justify-items: center; gap: 14px;
  max-width: 600px;
  padding: 40px 48px;
  border-radius: 20px;
  background: var(--design-panel);
  box-shadow: 0 18px 50px rgb(17 24 39 / .12);
  text-align: center;
}
.design-invite-mark {
  display: grid; place-items: center;
  width: 76px; height: 76px;
  border: 2px solid var(--design-teal);
  border-radius: 50%;
  background: var(--design-teal-soft);
  color: var(--design-teal-ink, var(--design-teal));
}
.design-invite-mark svg { width: 34px; height: 34px; }
.design-invite h2 { margin: 0; font-size: 1.7rem; letter-spacing: -.02em; }
.design-invite p { margin: 0; color: var(--design-muted); }
.design-invite button {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 14px 28px;
  border: 0; border-radius: 12px;
  background: var(--design-teal); color: #08201f;
  font: inherit; font-size: 1rem; font-weight: 700;
  cursor: pointer;
}

.design-viewcube {
  position: absolute; top: 12px; right: 12px;
  width: 110px; height: 110px;
  color: var(--design-muted);
  touch-action: none;
}
.design-viewcube-canvas { width: 100%; height: 100%; display: block; cursor: grab; }
/* The two arrows under the cube turn the whole view a quarter turn about
   the line of sight: looking down at a sketch, across becomes up and down. */
.design-viewturns {
  position: absolute; top: 124px; right: 12px;
  width: 110px;
  display: flex; justify-content: space-between;
}
.design-viewturn {
  width: 30px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #B9C2CF; border-radius: 8px;
  background: #ffffff; color: var(--design-muted);
  cursor: pointer; padding: 0;
}
.design-viewturn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.design-viewturn:hover { background: var(--design-teal-soft); }
.design-viewturn:focus-visible { outline: 2px solid var(--design-teal); }
.design-viewtools {
  position: absolute; left: 50%; bottom: 16px;
  display: flex; gap: 4px;
  padding: 6px;
  transform: translateX(-50%);
  border-radius: 12px;
  background: var(--design-panel);
  box-shadow: 0 6px 18px rgb(17 24 39 / .10);
}

/* ------------------------------------------------------ property panel */

/* The command drawer.
 *
 * The concept's shape: a coloured header band saying what kind of thing
 * is open and what it is called, the few values the command needs, and
 * Cancel beside the one button that commits — never a modal, because the
 * model has to stay visible while the numbers change. */
.design-panel {
  min-height: 0;
  overflow: auto;
  padding: 0 0 18px;
  border-left: 1px solid var(--design-line);
  background: var(--design-panel);
}
.design-panel[hidden] { display: none; }
/* Everything below the header keeps the drawer's own inset. */
.design-panel > *:not(.design-drawer-head) { margin-inline: 18px; }

.design-panel[data-colour="orange"] { --head-colour: var(--x-orange); --head-soft: var(--x-orange-soft); }
.design-panel[data-colour="blue"] { --head-colour: var(--x-blue); --head-soft: var(--x-blue-soft); }
.design-panel[data-colour="purple"] { --head-colour: var(--x-purple); --head-soft: var(--x-purple-soft); }
.design-panel[data-colour="teal"] { --head-colour: var(--x-teal); --head-soft: var(--x-teal-soft); }
.design-panel[data-colour="amber"] { --head-colour: var(--x-amber); --head-soft: var(--x-amber-soft); }
.design-panel[data-colour="green"] { --head-colour: var(--x-green); --head-soft: var(--x-green-soft); }
.design-panel[data-colour="red"] { --head-colour: var(--x-red); --head-soft: var(--x-red-soft); }
.design-panel[data-colour="slate"] { --head-colour: var(--x-slate); --head-soft: var(--design-line-2); }

.design-drawer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 0 18px;
  padding: 15px 18px 14px;
  border-bottom: 1px solid var(--head-colour, var(--x-blue));
  background: var(--head-soft, var(--x-blue-soft));
}
.design-drawer-eyebrow {
  margin: 0 0 3px;
  color: var(--head-colour, var(--x-blue));
  font-size: .68rem; font-weight: 800; letter-spacing: .09em;
}
.design-drawer-head h2 {
  margin: 0;
  color: var(--design-ink);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0;
}
/* A drawer with no eyebrow is a command being CREATED rather than edited,
   and its title carries the whole of what it is — so it takes the quiet
   treatment the panel headings always had. */
.design-drawer-head:not(:has(.design-drawer-eyebrow)) h2 {
  color: var(--head-colour, var(--x-blue));
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.design-panel h2 {
  margin: 0 0 18px;
  color: var(--design-muted);
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
}

/* -------------------------------------------------------------- status */

.design-status {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--design-line);
  background: var(--design-panel);
  font-size: .82rem;
}
/* ------------------------------------------------------------- history */

/* --------------------------------------------------- the history timeline
 *
 * A horizontal recipe, not an engineering log — the workspace concept's
 * words, and the reason each card carries a value and an instruction
 * rather than only a type. Cards read left to right in the order the model
 * was built, with a green marker showing where the model currently stands.
 */

/* The panel around the strip: a title that says which question this
   answers, and a way to put it away. */
.design-history-panel {
  display: grid;
  grid-template-rows: auto auto;
  border-top: 1px solid var(--design-line);
  background: var(--design-panel);
}
.design-history-panel[hidden] { display: none; }
.design-history-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px 0;
}
.design-history-title {
  color: var(--design-muted);
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
}
.design-history-sub { color: var(--design-muted); font-size: .76rem; opacity: .8; }
.design-history-fold {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--x-blue);
  font: inherit; font-size: .76rem; font-weight: 750;
  cursor: pointer;
}
.design-history-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  min-width: 0;
}

/* Whether the model is where it was left. Beside the timeline rather than
   in the status line, because it is about the history. */
.design-verdict-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  align-self: center;
  width: clamp(210px, 22vw, 330px);
  margin: 10px 14px 12px 6px;
  padding: 11px 14px;
  border-radius: 14px;
  background: var(--x-green-soft);
  font-size: .74rem;
  line-height: 1.45;
}
.design-verdict-card:empty { display: none; }
.design-verdict-card div { display: grid; min-width: 0; }
.design-verdict-card strong {
  color: var(--x-green-ink);
  font-size: .8rem;
  font-weight: 800;
}
.design-verdict-card span { color: var(--design-muted); }
.design-verdict-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--x-green);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
}
/* Rolled back is not an error — it is a place the learner asked to stand.
   Amber, which is "look at this", not red, which is "you broke it". */
.design-verdict-card[data-state="rolled"] { background: var(--x-amber-soft); }
.design-verdict-card[data-state="rolled"] strong { color: var(--x-amber); }
.design-verdict-card[data-state="rolled"] .design-verdict-mark { background: var(--x-amber); }

@media (max-width: 1099px) {
  /* The card is the first thing to go: the cards themselves are the
     history, and the sentence beside them is the commentary. */
  .design-history-body { grid-template-columns: minmax(0, 1fr); }
  .design-verdict-card { display: none; }
}

.design-timeline {
  display: flex;
  gap: 0;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 10px 14px 12px;
  background: var(--design-panel);
}
.design-step {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 3px;
  flex: 0 0 auto;
  /* The concept's card is 180–200 px on desktop and 140–160 on a compact
     tablet. Wide enough for "30 mm · New body" to sit on one line, which
     is the whole reason the card exists. */
  width: clamp(140px, 15vw, 190px);
  padding: 9px 12px;
  border: 1px solid var(--design-line-2);
  border-radius: 12px;
  background: var(--design-panel);
  color: var(--design-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.design-step-head { display: flex; align-items: center; gap: 7px; }
.design-step svg { width: 18px; height: 18px; flex: 0 0 auto; }
.design-step-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .82rem;
  font-weight: 800;
}
.design-step-value {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--design-muted);
  font-size: .74rem;
  font-weight: 500;
}
/* What to do with it, which is the one thing a card cannot show by being
   a card. Quiet, because it is the same on every card. */
.design-step-hint {
  color: var(--design-muted);
  font-size: .64rem;
  font-weight: 700;
  opacity: .8;
}
.design-step:hover { border-color: var(--step-colour, var(--design-line)); }

/* Selected takes the FEATURE's colour, not one house colour — so a chosen
   Cut is red and a chosen Fillet is teal, and the card agrees with the
   tool that made it. */
.design-step[aria-current="true"] {
  border-color: var(--step-colour, var(--design-teal));
  border-width: 2px;
  padding: 8px 11px;
  background: var(--step-soft, var(--design-teal-soft));
}
.design-step[aria-current="true"] .design-step-name,
.design-step[aria-current="true"] .design-step-hint {
  color: var(--step-colour, var(--design-teal-ink));
  opacity: 1;
}
.design-step[data-colour="orange"] { --step-colour: var(--x-orange); --step-soft: var(--x-orange-soft); }
.design-step[data-colour="blue"] { --step-colour: var(--x-blue); --step-soft: var(--x-blue-soft); }
.design-step[data-colour="purple"] { --step-colour: var(--x-purple); --step-soft: var(--x-purple-soft); }
.design-step[data-colour="teal"] { --step-colour: var(--x-teal); --step-soft: var(--x-teal-soft); }
.design-step[data-colour="amber"] { --step-colour: var(--x-amber); --step-soft: var(--x-amber-soft); }
.design-step[data-colour="green"] { --step-colour: var(--x-green); --step-soft: var(--x-green-soft); }
.design-step[data-colour="red"] { --step-colour: var(--x-red); --step-soft: var(--x-red-soft); }
.design-step[data-colour="slate"] { --step-colour: var(--x-slate); --step-soft: var(--design-line-2); }

/* Past the marker: still listed, not built. Muted rather than hidden, so
   the design does not appear to have lost the end of itself. */
.design-step[data-rolled="true"] { opacity: .42; }

/* Where the selection came from. The step that made it is drawn as a chosen
   card is, in its own colour, with a halo so it reads at a glance; the
   sketch it was drawn in and the steps that worked on it since are outlined
   in theirs, so a part's history can be read backwards from the part. */
.design-step[data-linked="made"] {
  border: 2px solid var(--step-colour, var(--design-teal));
  padding: 8px 11px;
  background: var(--step-soft, var(--design-teal-soft));
  box-shadow: 0 0 0 3px var(--step-soft, var(--design-teal-soft));
}
.design-step[data-linked="drawn"],
.design-step[data-linked="changed"],
.design-step[data-linked="built"] {
  border: 1px dashed var(--step-colour, var(--design-teal));
}
.design-step[data-linked="made"] .design-step-name,
.design-step[data-linked] .design-step-hint {
  color: var(--step-colour, var(--design-teal-ink));
  opacity: 1;
}
/* A linked step past the marker still says so, a little brighter. */
.design-step[data-rolled="true"][data-linked] { opacity: .75; }

.design-step-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  color: var(--design-muted);
  opacity: .55;
}

/* The marker: where the model actually stands. A line rather than a card,
   because it is a position between two features and not one of them. */
/* The card the dragged marker is over: where the design will roll to on release. */
.design-step[data-scrub="true"] { outline: 2px solid var(--orange, #f15f24); outline-offset: 2px; opacity: 1; }
.design-marker { cursor: grab; touch-action: none; }
.design-marker:active { cursor: grabbing; }
.design-marker {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  flex: 0 0 auto;
  width: 62px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.design-marker-stem {
  width: 3px;
  min-height: 54px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--x-green);
  box-shadow: 0 -4px 0 -1px var(--x-green);
}
.design-marker-words {
  color: var(--x-green-ink);
  font-size: .6rem;
  font-weight: 800;
  white-space: nowrap;
}

.design-menu {
  position: absolute;
  z-index: 40;
  min-width: 208px;
  padding: 5px;
  border: 1px solid var(--design-line);
  border-radius: 10px;
  background: var(--design-panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}
.design-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--design-ink);
  font: inherit;
  font-size: .84rem;
  text-align: left;
  cursor: pointer;
}
.design-menu-item:hover { background: var(--design-teal-soft); }
.design-menu-key { color: var(--design-muted); font-size: .76rem; }
.design-menu-rule {
  height: 1px;
  margin: 4px 6px;
  background: var(--design-line-2);
}

.design-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0 4px;
}
.design-swatch {
  width: 26px; height: 26px;
  border: 2px solid transparent;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.design-swatch[aria-pressed="true"] {
  border-color: var(--design-ink);
}
.design-swatch:focus-visible {
  outline: 2px solid var(--design-teal);
  outline-offset: 2px;
}

.design-history {
  border: 0; background: none; color: var(--design-muted);
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.design-state { color: var(--design-teal-ink, var(--design-teal)); font-weight: 700; }
.design-view[data-state="attention"] .design-state { color: var(--design-orange); }
.design-units { margin-left: auto; color: var(--design-muted); }

/* --------------------------------------------------------- tablet, 4.2 */

@media (max-width: 1199px) {
  /* The browser becomes a drawer rather than taking a quarter of an 11-inch
     screen away from the thing being drawn. */
  .design-body { grid-template-columns: minmax(0, 1fr); }
  .design-body:has(.design-panel:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .design-browser {
    position: absolute; z-index: 5; inset: 0 auto 0 0;
    width: 272px;
    box-shadow: 0 0 40px rgb(17 24 39 / .18);
    transform: translateX(-100%);
    transition: transform 160ms ease;
  }
  .design-view[data-browser="open"] .design-browser { transform: none; }
  .design-body { position: relative; }
  /* Named with its toolbar so it outranks the base rule below, which
     comes later in this file. */
  .design-toolbar .design-browser-open { display: inline-flex; }
}

/* The drawer's opener: only where the browser is a drawer. */
.design-browser-open {
  display: none;
  align-items: center;
  align-self: center;
  margin-left: 6px;
  padding: 6px 10px;
  border: 1px solid var(--design-line);
  border-radius: 8px;
  background: var(--design-panel);
  color: var(--design-muted);
  font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  cursor: pointer;
}
.design-view[data-browser="open"] .design-browser-open {
  color: var(--design-teal-ink, var(--design-teal));
  border-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .design-browser { transition: none; }
}

/* ------------------------------------------------ the property panel's parts
 *
 * Contextual, not modal — §17. A learner setting an extrusion distance can
 * still see the shape it is about to make, which is the whole reason the
 * screens put this beside the viewport rather than over it.
 */

.design-subheading {
  margin: 22px 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
}
.design-label {
  margin: 18px 0 6px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--design-ink);
}
.design-readout {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--design-teal-soft);
  color: var(--design-teal-ink, var(--design-teal));
  font-size: .9rem;
  font-weight: 650;
}
.design-tip {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--design-teal-soft);
  color: var(--design-ink);
  font-size: .84rem;
}

/* A big number field with its unit — §17 asks for both. */
/* A long list — the fonts on this computer run to hundreds. Styled to
   match the number fields beside it, and left as a native select so the
   operating system's own scrolling and type-to-find come for free. */
.design-dropdown {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--design-teal);
  border-radius: 10px;
  background: var(--design-panel, #fff);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--design-ink);
  cursor: pointer;
}
.design-dropdown:focus-visible {
  outline: 3px solid var(--design-teal);
  outline-offset: 2px;
}

.design-number {
  display: flex;
  align-items: center;
  border: 2px solid var(--design-teal);
  border-radius: 10px;
  overflow: hidden;
}
.design-number input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 650;
  color: var(--design-ink);
}
.design-number input:focus { outline: none; }
/* The ring goes round the whole number, box and unit, since the input's own
   outline is off to keep the unit inside the frame. */
.design-number:focus-within { box-shadow: 0 0 0 3px var(--design-orange); }
.design-number span {
  padding: 0 14px;
  color: var(--design-muted);
  font-size: .86rem;
}
.design-text {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--design-line);
  border-radius: 10px;
  background: var(--design-panel);
  font: inherit;
  font-size: .95rem;
}

.design-chooser { display: flex; gap: 8px; flex-wrap: wrap; }
.design-choice {
  flex: 1 1 auto;
  min-height: 44px;                 /* §3.2: never below a real touch target */
  padding: 10px 14px;
  border: 1px solid var(--design-line);
  border-radius: 10px;
  background: var(--design-panel);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}
.design-choice[aria-checked="true"] {
  border-color: var(--design-teal-ink, var(--design-teal));
  background: var(--design-teal-soft);
  color: var(--design-teal-ink, var(--design-teal));
}
.design-choice:focus-visible { outline: 2px solid var(--design-teal); outline-offset: 2px; }

.design-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  margin-bottom: 8px;
  padding: 10px 14px;
  border: 1px solid var(--design-line);
  border-radius: 10px;
  background: var(--design-panel);
  font: inherit;
  font-size: .88rem;
  text-align: left;
  cursor: pointer;
}
.design-option[aria-checked="true"] {
  border-color: var(--design-teal-ink, var(--design-teal));
  background: var(--design-teal-soft);
}
.design-option:disabled { opacity: .5; cursor: default; }
.design-option-tick {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border: 2px solid var(--design-line);
  border-radius: 50%;
  color: var(--design-teal-ink, var(--design-teal));
  font-size: .8rem;
  font-weight: 800;
}
.design-option[aria-checked="true"] .design-option-tick {
  border-color: var(--design-teal-ink, var(--design-teal));
}

/* The export check. A mark AND words AND a colour — §17 says never colour
   alone, and "is this printable?" is the question that most deserves it. */
.design-verdict {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding: 16px;
  border-radius: 12px;
}
.design-verdict.is-good { background: var(--design-teal-soft); }
.design-verdict.is-bad {
  background: color-mix(in srgb, #ff5a1f 12%, var(--design-panel));
}
.design-verdict-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: var(--design-on-teal, #08201f);
  font-weight: 800;
}
.design-verdict.is-good .design-verdict-mark { background: var(--design-teal); }
.design-verdict.is-bad .design-verdict-mark { background: var(--design-orange); }
.design-verdict strong { display: block; margin-bottom: 4px; }
.design-verdict p { margin: 2px 0 0; color: var(--design-muted); font-size: .82rem; }

.design-actions {
  display: flex;
  gap: 10px;
  margin-top: 26px;
}
/* The end of the drawer, not the next field in it. */
.design-actions[data-footer="true"] {
  padding-top: 18px;
  border-top: 1px solid var(--design-line-2);
}
.design-primary, .design-secondary {
  flex: 1 1 auto;
  min-height: 48px;
  border-radius: 12px;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
}
.design-primary { border: 0; background: var(--design-teal); color: #08201f; }
.design-secondary {
  border: 1px solid var(--design-line);
  background: var(--design-panel);
  color: var(--design-ink);
}

/* The invite card, out of the way once there is something to look at. */
.design-invite.is-corner {
  position: absolute;
  top: 24px; left: 24px;
  max-width: 340px;
  padding: 22px 24px;
  text-align: left;
  justify-items: start;
}
.design-invite.is-corner h2 { font-size: 1.15rem; }
.design-invite.is-corner p { font-size: .88rem; }
.design-invite.is-corner .design-secondary { min-width: 120px; }

/* The view cube. Three faces, each a button — a learner asks "show me the
   front" far more often than they want to drag to it. */
.design-viewcube:focus-within { outline: 2px solid var(--design-teal); border-radius: 10px; }

/* ------------------------------------------------------- the selection

   A selected face, edge or shape is an offer: here is the thing, here is
   what it can become. The action sits under the description at full width
   so it reads as the next step rather than as one of several buttons. */

.design-panel-action {
  width: 100%;
  margin-top: 8px;
  justify-content: center;
}

/* A button that cannot do anything must not look like it can. The tools in
   the toolbar have said so since the first build; the panel's buttons did
   not, so "Fillet this edge" sat there in full colour on a build with no
   shape builder in it. */
.design-primary:disabled,
.design-secondary:disabled {
  opacity: .4;
  cursor: default;
}

/* A tool waiting for its subject. Extrude pressed with nothing selected
   does not fail — it waits, and says so in a way that is visible from the
   drawing rather than only in the status line. */
.design-tool[data-waiting="true"] {
  border-color: var(--design-orange, #ff5a1f);
  box-shadow: inset 0 0 0 2px var(--design-orange, #ff5a1f);
}

@media (prefers-reduced-motion: no-preference) {
  .design-tool[data-waiting="true"] { animation: design-waiting 1.4s ease-in-out infinite; }
}

@keyframes design-waiting {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--design-orange, #ff5a1f); }
  50% { box-shadow: inset 0 0 0 2px rgba(255, 90, 31, 0.35); }
}

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

   Hiding and deleting were possible for neither a sketch nor a body, so a
   drawing made by mistake stayed on screen for the life of the project and
   a body could only be removed by undoing back past it. The row holds the
   name; the eye and the bin sit beside it. */

.design-node-row {
  display: flex;
  align-items: center;
  gap: 2px;
  /* 48 px on desktop, which is the concept's row height, and never below
     44 for a finger. */
  min-height: 44px;
  padding-right: 6px;
  border: 1px solid transparent;
  border-radius: 9px;
}
/* Each level in by 28 px, from the concept's tokens. */
.design-node-row[data-depth="1"] { padding-left: 14px; }
.design-node-row[data-depth="2"] { padding-left: 42px; }
.design-node-row[data-depth="2"] .design-node { font-weight: 500; }
.design-node-row:hover { background: var(--design-line-2, #F4F6F9); }

/* The selected row takes the colour of the thing it names, so the row and
   the shape in the canvas agree about which body this is. */
.design-node-row[data-current="true"] {
  border-color: var(--row-colour, var(--x-blue));
  background: var(--row-soft, var(--x-blue-soft));
}
.design-node-row[data-current="true"] .design-node {
  color: var(--row-colour, var(--x-blue));
  font-weight: 800;
}
.design-node-row[data-colour="orange"] { --row-colour: var(--x-orange); --row-soft: var(--x-orange-soft); }
.design-node-row[data-colour="blue"] { --row-colour: var(--x-blue); --row-soft: var(--x-blue-soft); }
.design-node-row[data-colour="purple"] { --row-colour: var(--x-purple); --row-soft: var(--x-purple-soft); }
.design-node-row[data-colour="teal"] { --row-colour: var(--x-teal); --row-soft: var(--x-teal-soft); }
.design-node-row[data-colour="amber"] { --row-colour: var(--x-amber); --row-soft: var(--x-amber-soft); }
.design-node-row[data-colour="green"] { --row-colour: var(--x-green); --row-soft: var(--x-green-soft); }
.design-node-row[data-colour="red"] { --row-colour: var(--x-red); --row-soft: var(--x-red-soft); }
.design-node-row[data-colour="slate"] { --row-colour: var(--x-slate); --row-soft: var(--design-line-2); }

/* The three dots. Always there, because the concept asks for the same
   actions from the button and from a right-click — and a menu that only
   opens on right-click is a menu half a class never finds. */
.design-node-menu {
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 700;
}

/* A hidden thing still reads as itself, just quietly. Opacity alone would
   be colour-only signalling; the eye beside it carries the same state. */
.design-node-row[data-dimmed="true"] > .design-node { opacity: .5; }

.design-node-action {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--design-muted);
  cursor: pointer;
  /* Quiet, never absent. The concept is explicit: "On touch devices, a
     long press opens the same menu. Do not require hover." A control that
     only appears on hover is a control a tablet has not got — and these
     were invisible until the pointer arrived, which on a touch screen is
     never. */
  opacity: .55;
}
.design-node-action svg { width: 16px; height: 16px; }
.design-node-row:hover .design-node-action,
.design-node-row:focus-within .design-node-action,
.design-node-action[data-on="true"] { opacity: 1; }
@media (pointer: coarse) {
  /* A finger needs the whole 44 px the concept asks for, even where the
     mark inside it is 16. */
  .design-node-action { width: 40px; height: 40px; opacity: 1; }
}
.design-node-action:hover { background: #E7EBF1; color: var(--design-ink); }
.design-node-action:focus-visible {
  opacity: 1;
  outline: 2px solid var(--design-teal);
  outline-offset: -2px;
}
.design-node-action[data-danger="true"]:hover { background: #FEE4E2; color: #B42318; }

@media (hover: none) {
  .design-node-action { opacity: 1; }
}

/* A measurement being typed into.
 *
 * A real input, over the label it replaces. The alternative is drawing an
 * editable field in WebGL, which means writing a text cursor, a selection
 * and an input method from nothing — and getting none of it for free on a
 * tablet keyboard. */
.design-dimension-input {
  position: absolute;
  z-index: 12;
  width: 96px;
  padding: 6px 8px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--design-teal);
  border-radius: 8px;
  background: var(--design-panel);
  color: var(--design-ink);
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 8px 22px rgb(17 24 39 / .18);
}
.design-dimension-input:focus { outline: none; }
.design-dimension-input:focus-visible { box-shadow: 0 8px 22px rgb(17 24 39 / .18), 0 0 0 3px var(--design-orange); }

/* The size of a shape being drawn, beside the pointer. Typed into while
   the pointer sets the direction: Enter finishes the shape at that size,
   Tab moves to the next number, Escape stops the shape. It takes no
   pointer events of its own, so the drawing hand is never blocked. */
.design-typed {
  position: absolute;
  z-index: 12;
  display: flex; gap: 6px; align-items: center;
  padding: 4px 6px;
  border: 1px solid #c7ced9;
  border-radius: 8px;
  background: rgb(255 255 255 / .96);
  box-shadow: 0 6px 18px rgb(17 24 39 / .14);
  pointer-events: none;
  white-space: nowrap;
}
.design-typed label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  color: var(--design-muted);
}
.design-typed input {
  width: 68px;
  padding: 3px 6px;
  border: 1.5px solid #c7ced9; border-radius: 6px;
  background: #fff; color: var(--design-ink);
  font: inherit; font-size: .88rem; font-weight: 700;
  text-align: right;
  -moz-appearance: textfield;
}
.design-typed input::-webkit-outer-spin-button,
.design-typed input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.design-typed input:focus { outline: none; border-color: var(--design-teal); box-shadow: 0 0 0 2px rgb(15 159 152 / .18); }
.design-typed input[data-typed="true"] { border-color: var(--design-teal); background: #f2fbfa; }
.design-typed .design-typed-unit { font-size: .72rem; color: var(--design-muted); }

/* ------------------------------------------------------- all the tools
 *
 * The concept's More panel: "Keep Essentials small while all tools remain
 * searchable and grouped by action." Over the workspace rather than beside
 * it, because looking for a tool is a thing you stop to do.
 */

.design-alltools {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(15 23 42 / .38);
}
.design-alltools[hidden] { display: none; }

.design-alltools-sheet {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 14px;
  width: min(900px, 100%);
  max-height: 100%;
  padding: 22px 24px 18px;
  border-radius: 20px;
  background: var(--design-panel);
  box-shadow: 0 24px 60px rgb(15 23 42 / .28);
}
.design-alltools-head { display: flex; align-items: flex-start; gap: 12px; }
.design-alltools-head h2 { margin: 0; font-size: 1.4rem; font-weight: 800; }
.design-alltools-head p {
  margin: 4px 0 0;
  color: var(--design-muted);
  font-size: .84rem;
}
.design-alltools-close {
  margin-left: auto;
  width: 36px; height: 36px;
  border: 1px solid var(--design-line);
  border-radius: 50%;
  background: none;
  color: var(--design-muted);
  font-size: 1.3rem; line-height: 1;
  cursor: pointer;
}
.design-alltools-close:hover { background: var(--design-line-2); color: var(--design-ink); }

.design-alltools-search {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--design-line);
  border-radius: 12px;
  background: var(--design-line-2, #F8FAFC);
  font: inherit;
  font-size: .95rem;
  color: var(--design-ink);
}
.design-alltools-search:focus-visible {
  outline: 2px solid var(--x-blue);
  outline-offset: 1px;
}

.design-alltools-results { overflow: auto; padding-right: 4px; }
.design-alltools-group {
  margin: 4px 0 10px;
  color: var(--design-muted);
  font-size: .74rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
}
.design-alltools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.design-alltools-none, .design-alltools-note {
  margin: 0;
  color: var(--design-muted);
  font-size: .82rem;
}
.design-alltools-note {
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--x-blue-soft);
  color: var(--x-blue);
  font-weight: 600;
}

/* A card that says what the tool is FOR, which is the thing a name cannot
   say and the reason somebody is in this panel at all. */
.design-toolcard {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--design-line);
  border-radius: 14px;
  background: var(--design-panel);
  color: var(--design-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.design-toolcard:hover { border-color: var(--card-colour, var(--x-blue)); }
.design-toolcard:focus-visible {
  outline: 2px solid var(--card-colour, var(--x-blue));
  outline-offset: 1px;
}
.design-toolcard-tile {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--card-soft, var(--x-blue-soft));
}
.design-toolcard-tile svg { width: 24px; height: 24px; }
.design-toolcard-words { display: grid; gap: 2px; min-width: 0; }
.design-toolcard-words strong { font-size: .92rem; font-weight: 800; }
.design-toolcard-words span { color: var(--design-muted); font-size: .8rem; }
.design-toolcard-where {
  color: var(--card-colour, var(--x-blue)) !important;
  font-size: .62rem !important;
  font-weight: 800;
  letter-spacing: .07em;
}
.design-toolcard[data-colour="orange"] { --card-colour: var(--x-orange); --card-soft: var(--x-orange-soft); }
.design-toolcard[data-colour="blue"] { --card-colour: var(--x-blue); --card-soft: var(--x-blue-soft); }
.design-toolcard[data-colour="purple"] { --card-colour: var(--x-purple); --card-soft: var(--x-purple-soft); }
.design-toolcard[data-colour="teal"] { --card-colour: var(--x-teal); --card-soft: var(--x-teal-soft); }
.design-toolcard[data-colour="amber"] { --card-colour: var(--x-amber); --card-soft: var(--x-amber-soft); }
.design-toolcard[data-colour="green"] { --card-colour: var(--x-green); --card-soft: var(--x-green-soft); }
.design-toolcard[data-colour="red"] { --card-colour: var(--x-red); --card-soft: var(--x-red-soft); }
.design-toolcard[data-colour="slate"] { --card-colour: var(--x-slate); --card-soft: var(--design-line-2); }

.design-tool-dots { font-size: 1.1rem; line-height: 22px; letter-spacing: .06em; }

/* The rubber band in 3D. A rectangle on the SCREEN rather than on a
   plane: out here there is no one plane, and a box drawn on a flat screen
   is a question about the screen. */
.design-screen-box {
  position: absolute;
  z-index: 6;
  border: 1.5px solid var(--x-blue);
  border-radius: 3px;
  background: rgb(59 130 246 / .12);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Other ways to draw the same shape

   A shape button and the chevron that opens its alternatives, side by side
   and reading as one control. The chevron is deliberately narrow: it is a
   way in for somebody who has gone looking, not something to be hit by
   accident on the way to the tool itself.
   --------------------------------------------------------------------------- */

.design-tool-pair {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
}
/* The pair shares one hover surface, so the chevron does not look like a
   separate button parked against the tool. */
.design-tool-pair:hover .design-tool:not(:disabled),
.design-tool-pair:hover .design-tool-more:not(:disabled) {
  background: #F4F6F9;
}
.design-tool-pair .design-tool {
  width: 56px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.design-tool-more {
  display: grid;
  place-items: center;
  width: 16px;
  padding: 0;
  border: 1px solid transparent;
  border-left: none;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  background: none;
  color: var(--design-muted, #6B7683);
  cursor: pointer;
}
.design-tool-more svg { width: 12px; height: 12px; transform: rotate(90deg); }
.design-tool-more:focus-visible {
  outline: 2px solid var(--design-teal);
  outline-offset: -2px;
}
.design-tool-more:disabled { opacity: .38; cursor: default; }

@media (pointer: coarse) {
  .design-tool-pair .design-tool { width: 64px; }
  .design-tool-more { width: 22px; }
  .design-tool-more svg { width: 14px; height: 14px; }
}

/* The menu itself. Wider than the body menu because each row carries a
   sentence: eight ways to draw a circle are only worth offering if you can
   tell them apart without trying each one in turn. */
.design-shape-menu { min-width: 264px; }
.design-shape-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
}
.design-shape-art {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--x-orange, #E0662A);
}
.design-shape-words { display: grid; gap: 1px; }
.design-shape-words small {
  color: var(--design-muted, #6B7683);
  font-size: .72rem;
  font-weight: 400;
  line-height: 1.25;
}
.design-shape-item[data-on="true"] {
  background: var(--x-orange-soft, #FDF0E8);
}
.design-shape-item[data-on="true"] .design-shape-words span { font-weight: 700; }