:root {
  /* colours */
  --colour-page: #FFFAFA;
  --colour-card: #FFFFFF;
  --colour-words: #221B1B;
  --colour-quiet-words: #6E6262;
  --colour-line: #EDE1E1;
  --colour-button: #FF8577;
  --colour-button-words: #4A0E08;
  --colour-button-pressed: #F26E60;
  --colour-warning: #D32F2F;
  --colour-warning-wash: #FFF5F5;
  --colour-done: #2E7D32;
  --colour-done-wash: #EEF7EE;
  --colour-typing-box: #FFF0EE;
  --colour-typing-line: #F4B3AA;
  --colour-own-words: #FFF0EE;
  --colour-minionhub-words: #F4F1FB;
  --colour-step-now: #FF8577;
  --colour-step-done: #2E7D32;
  --colour-step-to-come: #E6DADA;
  --colour-panel: #FBF6F6;
  --colour-next-line-wash: #FFF4F2;
  --colour-code-wash: #F6F1F1;
  --colour-drop-line: #DDC7C7;
  --colour-status-ready: #2E7D32;
  --colour-status-ready-wash: #EEF7EE;
  --colour-status-running: #A9372A;
  --colour-status-running-wash: #FFECE9;
  --colour-status-clock: #1E5FA8;
  --colour-status-clock-wash: #EAF2FB;
  --colour-status-try: #5B4BB7;
  --colour-status-try-wash: #F1EFFB;
  --colour-status-trial: #8F5600;
  --colour-status-trial-wash: #FFF4E0;
  --colour-status-described: #6E6262;
  --colour-status-described-wash: #F4EFEF;
  --colour-status-stopped: #8A3B3B;
  --colour-status-stopped-wash: #FBEDED;
  --colour-status-built: #3F6464;
  --colour-status-built-wash: #EAF2F2;
  --colour-status-switch-on: #AD1457;
  --colour-status-switch-on-wash: #FCE8F0;
  --colour-verdict-met: #2E7D32;
  --colour-verdict-met-wash: #EEF7EE;
  --colour-verdict-not-met: #8F5600;
  --colour-verdict-not-met-wash: #FFF4E0;
  --colour-verdict-not-checked: #5E5555;
  --colour-verdict-not-checked-wash: #F4EFEF;
  --colour-wait-bar: #FF8577;
  --colour-wait-track: #FBE3DF;
  --colour-shade: rgba(34, 27, 27, 0.35);
  --colour-focus: #378ADD;
  --logo-minion-1: #E24B4A;
  --logo-minion-2: #EF9F27;
  --logo-minion-3: #639922;
  --logo-minion-4: #1D9E75;
  --logo-minion-5: #378ADD;
  --logo-minion-6: #7F77DD;
  --logo-hub: #111111;
  --logo-icon-square: #111111;
  --logo-icon-h: #FFFFFF;
  --logo-icon-m-light: #FFC2BA;
  --logo-icon-m-deep: #9E2B1F;

  /* lettering */
  --font-words: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --size-words: 16px;
  --size-small: 14px;
  --size-page-name: 28px;
  --size-card-name: 19px;
  --weight-words: 400;
  --weight-strong: 600;
  --line-height: 1.5;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* corners, lines and shadows */
  --corner-card: 12px;
  --corner-button: 6px;
  --corner-typing-box: 14px;
  --line-thin: 1px;
  --line-warning: 3px;
  --line-dashed: 2px;
  --shadow-card: 0 1px 2px rgba(34, 27, 27, 0.06);
  --shadow-soft: 0 4px 16px rgba(34, 27, 27, 0.08);
  --shadow-none: none;

  /* sizes of things */
  --button-height: 40px;
  --logo-height: 32px;
  --band-top-height: 64px;
  --band-bottom-height: 44px;
  --column-width: 720px;
  --column-width-wide: 1320px;
  --so-far-width: 380px;
  --so-far-width-with-a-design: 540px;
  --so-far-least: 260px;
  --typing-lines: 10;
  --wait-bar-height: 4px;
  --wait-bar-length: 30%;
  --wait-bar-time: 1.4s;
  --menu-height: 52px;
  --page-heading-height: 150px;
  --menu-line: 2px;
  --menu-lines-width: 18px;
  --menu-line-gap: 3px;
  --focus-line: 2px;
  --person-menu-width: 200px;
  --version-block-least: 200px;
  --message-width: 85%;
  --org-box-width: 124px;
  --org-drop: 20px;
  --org-key-line: 32px;
  --org-dotted-dash: 2 6;
  --line-dotted: 2px;
  --build-least-height: 420px;
  --code-letter-gap: 0.3em;
  --code-width: 12ch;
  --steps-bar-height: 4px;
  --steps-bar-space: 64px;
  --status-dot: 8px;
  --pulse-time: 1.6s;
  --pulse-least: 0.3;
  --description-lines: 2;
  --side-card-width: 360px;
  --tile-number: 28px;
  --drop-area-height: 96px;
  --result-heading-size: 18px;
  --result-subheading-size: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--band-top-height) + var(--menu-height) + var(--space-3)); }
body {
  margin: 0;
  background: var(--colour-page);
  color: var(--colour-words);
  font-family: var(--font-words);
  font-size: var(--size-words);
  font-weight: var(--weight-words);
  line-height: var(--line-height);
  padding-top: var(--band-top-height);
  padding-bottom: calc(var(--band-bottom-height) + var(--space-5));
}
a { color: inherit; }
:focus-visible { outline: var(--focus-line) solid var(--colour-focus); outline-offset: var(--focus-line); }

/* ---- the band across the top ---- */
.band-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: var(--band-top-height);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  background: var(--colour-page);
  border-bottom: var(--line-thin) solid var(--colour-line);
}
.logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.logo { height: var(--logo-height); width: auto; display: block; }
.logo-minion-1 { fill: var(--logo-minion-1); }
.logo-minion-2 { fill: var(--logo-minion-2); }
.logo-minion-3 { fill: var(--logo-minion-3); }
.logo-minion-4 { fill: var(--logo-minion-4); }
.logo-minion-5 { fill: var(--logo-minion-5); }
.logo-minion-6 { fill: var(--logo-minion-6); }
.logo-hub { fill: var(--logo-hub); }
.logo-icon-square { fill: var(--logo-icon-square); }
.logo-icon-h { fill: var(--logo-icon-h); }
.logo-icon-m-light { stop-color: var(--logo-icon-m-light); }
.logo-icon-m-deep { stop-color: var(--logo-icon-m-deep); }
.band-top-right { display: flex; align-items: center; gap: var(--space-2); }
.person { position: relative; }
.person > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center;
  height: var(--button-height); padding: 0 var(--space-3);
  border-radius: var(--corner-button);
  font-weight: var(--weight-strong);
}
.person > summary::-webkit-details-marker { display: none; }
.person-menu {
  position: absolute; right: 0; top: calc(var(--button-height) + var(--space-1));
  min-width: var(--person-menu-width);
  background: var(--colour-card);
  border: var(--line-thin) solid var(--colour-line);
  border-radius: var(--corner-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.person-menu .signed-in-as { color: var(--colour-quiet-words); font-size: var(--size-small); padding: 0 var(--space-2); overflow-wrap: anywhere; }
.person-menu a { padding: var(--space-2); border-radius: var(--corner-button); text-decoration: none; }
.person-menu form { margin: 0; }

/* ---- the menu under it, which stays on screen with the band - entry 88 ---- */
.menu {
  position: sticky; top: var(--band-top-height); z-index: 19;
  border-bottom: var(--line-thin) solid var(--colour-line);
  background: var(--colour-page);
  padding: 0 var(--space-4);
}
.menu-button { display: none; }
.menu-list { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); max-width: var(--column-width-wide); }
.menu-list a {
  display: block; padding: var(--space-3) var(--space-3);
  text-decoration: none; color: var(--colour-quiet-words);
  border-bottom: var(--line-warning) solid transparent;
}
.menu-list a[aria-current="page"] { color: var(--colour-words); border-bottom-color: var(--colour-button); font-weight: var(--weight-strong); }
.menu-lines { display: inline-block; width: var(--menu-lines-width); }
.menu-lines i { display: block; height: var(--menu-line); margin: var(--menu-line-gap) 0; background: var(--colour-words); }

/* ---- the band along the bottom ---- */
.band-bottom {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  height: var(--band-bottom-height);
  display: flex; align-items: center; justify-content: center; gap: var(--space-5);
  background: var(--colour-page);
  border-top: var(--line-thin) solid var(--colour-line);
  font-size: var(--size-small);
}
.band-bottom a { color: var(--colour-quiet-words); text-decoration: none; }

/* ---- an agent's versions, each in its own block - entry 88 ---- */
.version-blocks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--version-block-least), 1fr)); gap: var(--space-3); }
.version-block {
  border: var(--line-thin) solid var(--colour-line); border-radius: var(--corner-card);
  padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start;
}
.version-block.in-use { border-color: var(--colour-button); }
.version-block .card-name, .version-block p { margin: 0; }
.run-now-uses { margin: 0 0 var(--space-3); }
.running-for { font-variant-numeric: tabular-nums; }

/* ---- the middle of a page ---- */
.column { max-width: var(--column-width); margin: 0 auto; padding: var(--space-5) var(--space-4); }
.column.wide { max-width: var(--column-width-wide); }
.page-name { font-size: var(--size-page-name); font-weight: var(--weight-strong); margin: 0 0 var(--space-1); line-height: 1.2; }
.page-line { margin: 0 0 var(--space-5); color: var(--colour-quiet-words); }
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.page-heading-side { margin: 0 0 var(--space-5); }
.talks-left { margin: 0; font-size: var(--size-small); color: var(--colour-quiet-words); }
.talks-left[hidden] { display: none; }
.card {
  background: var(--colour-card);
  border: var(--line-thin) solid var(--colour-line);
  border-radius: var(--corner-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  margin: 0 0 var(--space-4);
}
.card-name { font-size: var(--size-card-name); font-weight: var(--weight-strong); margin: 0 0 var(--space-2); }
.card p { margin: 0 0 var(--space-3); }
.card-buttons { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.quiet { color: var(--colour-quiet-words); }
.small { font-size: var(--size-small); }
.side-by-side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.pairs { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-3); }
.pairs dt { color: var(--colour-quiet-words); }
.pairs dd { margin: 0; }
.words { white-space: pre-wrap; overflow-wrap: anywhere; }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: var(--space-3) 0; border-top: var(--line-thin) solid var(--colour-line); display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.list > li:first-child { border-top: 0; }
.status { display: inline-block; font-size: var(--size-small); font-weight: var(--weight-strong); padding: 0 var(--space-2); border: var(--line-thin) solid var(--colour-line); border-radius: var(--corner-button); }

/* ---- the three buttons, and no others ---- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--button-height); padding: 0 var(--space-4);
  border-radius: var(--corner-button);
  border: var(--line-thin) solid var(--colour-button);
  font: inherit; font-weight: var(--weight-strong);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-none);
}
.button.main { background: var(--colour-button); color: var(--colour-button-words); }
.button.main:hover { background: var(--colour-button-pressed); }
.button.quiet { background: transparent; color: var(--colour-words); }
.button.warning { background: transparent; color: var(--colour-warning); border-color: var(--colour-warning); }
.button:disabled { cursor: progress; opacity: 0.7; }
.button.arrow::after { content: "\2191"; margin-left: var(--space-1); }

/* ---- boxes to type in ---- */
.field { display: block; margin: 0 0 var(--space-4); }
.field-label { display: block; font-weight: var(--weight-strong); margin: 0 0 var(--space-1); }
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%; font: inherit; color: inherit;
  padding: var(--space-2) var(--space-3);
  border: var(--line-thin) solid var(--colour-line);
  border-radius: var(--corner-button);
  background: var(--colour-card);
}
.field textarea { min-height: calc(4 * var(--line-height) * var(--size-words)); resize: vertical; }
.field-problem { display: block; color: var(--colour-warning); font-weight: var(--weight-strong); margin: 0 0 var(--space-1); }
.field textarea[aria-invalid="true"] { border-color: var(--colour-warning); }
.field-code input { letter-spacing: var(--code-letter-gap); max-width: var(--code-width); }
.choice { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 0 var(--space-3); }
.choice input { margin-top: var(--space-1); }
fieldset { border: 0; margin: 0 0 var(--space-4); padding: 0; }
legend { font-weight: var(--weight-strong); padding: 0; margin: 0 0 var(--space-2); }

/* ---- the four kinds of message, and no others ---- */
.note-wrong {
  border-left: var(--line-warning) solid var(--colour-warning);
  background: var(--colour-warning-wash);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  border-radius: 0 var(--corner-button) var(--corner-button) 0;
}
.note-wrong p { margin: 0 0 var(--space-1); }
.note-wrong .reference { color: var(--colour-quiet-words); font-size: var(--size-small); }
.note-wait { margin: 0 0 var(--space-4); }
.note-wait p { margin: var(--space-2) 0 0; }
.wait-bar { height: var(--wait-bar-height); background: var(--colour-wait-track); border-radius: var(--wait-bar-height); overflow: hidden; }
.wait-bar i { display: block; height: 100%; width: var(--wait-bar-length); background: var(--colour-wait-bar); border-radius: var(--wait-bar-height); animation: wait-move var(--wait-bar-time) ease-in-out infinite; }
@keyframes wait-move { 0% { margin-left: calc(-1 * var(--wait-bar-length)); } 100% { margin-left: 100%; } }
.note-empty { text-align: center; }
/* IT STAYS UNTIL IT IS CLOSED - it used to fade out after five seconds. */
.note-done {
  display: flex; align-items: flex-start; gap: var(--space-2);
  color: var(--colour-done); background: var(--colour-done-wash);
  border-radius: var(--corner-button);
  padding: var(--space-2) var(--space-4); margin: 0 0 var(--space-4);
}
.note-done p { margin: 0; flex: 1 1 auto; }
.note-close {
  flex: 0 0 auto; border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: var(--size-words); line-height: 1; padding: 0 var(--space-1);
}
.note-close[hidden] { display: none; }
.chosen-files { margin: 0 0 var(--space-4); }
.chosen-files[hidden] { display: none; }
.field[hidden] { display: none; }

/* ---- a status, in its own colour, with a dot ---- */
.status-label {
  display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap;
  font-size: var(--size-small); font-weight: var(--weight-strong);
  padding: 0 var(--space-2); border-radius: var(--corner-button);
}
.status-label::before { content: ""; width: var(--status-dot); height: var(--status-dot); border-radius: 50%; background: currentColor; }
.status-label[data-status="readyToRun"] { color: var(--colour-status-ready); background: var(--colour-status-ready-wash); }
.status-label[data-status="runningNow"] { color: var(--colour-status-running); background: var(--colour-status-running-wash); }
.status-label[data-status="runningNow"]::before { animation: pulse var(--pulse-time) ease-in-out infinite; }
.status-label[data-status="runsOnAClock"] { color: var(--colour-status-clock); background: var(--colour-status-clock-wash); }
.status-label[data-status="trialReady"] { color: var(--colour-status-try); background: var(--colour-status-try-wash); }
.status-label[data-status="readyToSwitchOn"] { color: var(--colour-status-switch-on); background: var(--colour-status-switch-on-wash); }
.status-label[data-status="trialRunning"] { color: var(--colour-status-trial); background: var(--colour-status-trial-wash); }
.status-label[data-status="beingDescribed"] { color: var(--colour-status-described); background: var(--colour-status-described-wash); }
.status-label[data-status="stopped"] { color: var(--colour-status-stopped); background: var(--colour-status-stopped-wash); }
.status-label[data-status="beingBuilt"] { color: var(--colour-status-built); background: var(--colour-status-built-wash); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: var(--pulse-least); } }

/* ---- My agents ---- */
.group-name { font-size: var(--size-card-name); font-weight: var(--weight-strong); margin: var(--space-5) 0 var(--space-3); }
.agent-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-4); }
.agent-cards .card { margin: 0; display: flex; flex-direction: column; box-shadow: var(--shadow-none); }
.agent-cards .card.in-use { box-shadow: var(--shadow-soft); }
.agent-cards .card-buttons { margin-top: auto; padding-top: var(--space-3); }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin: 0 0 var(--space-2); }
.card-top .card-name { margin: 0; overflow-wrap: anywhere; }
.two-lines { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--description-lines); line-clamp: var(--description-lines); overflow: hidden; overflow-wrap: anywhere; }
.empty-tiles { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); text-align: left; counter-reset: tile; }
.empty-tiles li { border: var(--line-thin) solid var(--colour-line); border-radius: var(--corner-card); padding: var(--space-4); counter-increment: tile; }
.empty-tiles li::before {
  content: counter(tile); display: inline-flex; align-items: center; justify-content: center;
  width: var(--tile-number); height: var(--tile-number); border-radius: 50%;
  background: var(--colour-typing-box); color: var(--colour-button-words); font-weight: var(--weight-strong); margin: 0 0 var(--space-2);
}
.empty-tiles strong { display: block; margin: 0 0 var(--space-1); }

/* ---- the three steps, as bars across the top ---- */
.steps-bar { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.steps-bar li { border-top: var(--steps-bar-height) solid var(--colour-step-to-come); padding: var(--space-2) 0 0; color: var(--colour-quiet-words); font-size: var(--size-small); }
.steps-bar li.done { border-top-color: var(--colour-step-done); color: var(--colour-words); }
.steps-bar li.done::after { content: " ✓"; color: var(--colour-step-done); }
.steps-bar li.now { border-top-color: var(--colour-step-now); color: var(--colour-words); font-weight: var(--weight-strong); }
.agent-cards .steps-bar { margin: 0 0 var(--space-2); }

/* ---- the "Build a new agent" page: the talk, and "Your agent so far" ---- */
/* THE TALK HAS THE FIXED HEIGHT AND SCROLLS ITS MESSAGES; "Your agent so far"
   beside it grows to hold everything it says. */
.build {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--so-far-width);
  gap: var(--space-4);
  align-items: start;
}
/* Wider once it holds the description. */
.build.holds-a-design { --so-far-width: var(--so-far-width-with-a-design); }
.build > .card { margin: 0; }
.talk {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--band-top-height) - var(--band-bottom-height) - var(--menu-height) - var(--page-heading-height) - var(--steps-bar-space));
  min-height: var(--build-least-height);
}
.talk-messages { flex: 1 1 auto; overflow-y: auto; padding: 0 0 var(--space-3); }
.message { max-width: var(--message-width); margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--corner-card); background: var(--colour-card); border: var(--line-thin) solid var(--colour-line); }
.message.from-you { margin-left: auto; background: var(--colour-own-words); }
.message.from-minionhub { background: var(--colour-minionhub-words); }
.message-who { font-size: var(--size-small); color: var(--colour-quiet-words); margin: 0 0 var(--space-1); }
.typing {
  position: sticky; bottom: 0;
  display: flex; align-items: flex-end; gap: var(--space-2);
  background: var(--colour-typing-box);
  border: var(--line-thin) solid var(--colour-typing-line);
  border-radius: var(--corner-typing-box);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
}
.typing textarea {
  flex: 1 1 auto; border: 0; background: transparent; resize: none;
  font: inherit; color: inherit; padding: var(--space-2) 0;
  field-sizing: content;
  min-height: calc(var(--line-height) * var(--size-words) + 2 * var(--space-2));
  max-height: calc(var(--typing-lines) * var(--line-height) * var(--size-words) + 2 * var(--space-2));
  overflow-y: auto;
}
.typing textarea:focus-visible { outline: 0; }
/* WAITING FOR minionhub'S OWN QUESTION TO BE ANSWERED - Suri, 24 October 2026 (decision 7). */
.typing[data-waits-for-an-answer] { border-color: var(--colour-warning); }
.typing .button.main { flex: 0 0 auto; }
.typing-left { font-size: var(--size-small); color: var(--colour-quiet-words); margin: var(--space-1) 0 0; text-align: right; }
.so-far { min-width: var(--so-far-least); }
.build.design-ready .so-far { border-color: var(--colour-button); }
.ready-label { color: var(--colour-button-words); background: var(--colour-typing-box); display: inline-block; font-size: var(--size-small); font-weight: var(--weight-strong); padding: 0 var(--space-2); border-radius: var(--corner-button); }
.light-panel { background: var(--colour-panel); border-radius: var(--corner-button); padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; }
.light-panel p { margin: 0 0 var(--space-1); }
.light-panel > * + p { margin-top: var(--space-3); }
.button.full { width: 100%; }
.card-buttons.full-width { display: block; }
/* minionhub's own questions before a design: Suri's choices are long, so each is a whole line and its words wrap - 16 October 2026. */
.setup-choices .card-buttons { display: grid; gap: var(--space-2); justify-content: stretch; }
.setup-choices .button { white-space: normal; height: auto; min-height: var(--button-height); padding: var(--space-2) var(--space-4); text-align: center; }
.so-far-button { display: none; }
.so-far-close { display: none; }
.design-ready-bar { display: none; }

/* ---- trying it ---- */
.side-card-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-card-width); gap: var(--space-4); align-items: start; }
.drop-area { border: var(--line-dashed) dashed var(--colour-drop-line); border-radius: var(--corner-card); padding: var(--space-4); min-height: var(--drop-area-height); margin: 0 0 var(--space-4); background: var(--colour-panel); }
.drop-area .field { margin: 0; }
.drop-area .chosen-files { margin: var(--space-3) 0 0; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.tiles > div { background: var(--colour-panel); border-radius: var(--corner-button); padding: var(--space-3); }
.tiles dt { color: var(--colour-quiet-words); font-size: var(--size-small); }
.tiles dd { margin: 0; font-weight: var(--weight-strong); }
.running-name { display: flex; align-items: center; gap: var(--space-2); }
.pulse-dot { width: var(--status-dot); height: var(--status-dot); border-radius: 50%; background: var(--colour-button); animation: pulse var(--pulse-time) ease-in-out infinite; flex: 0 0 auto; }
.verdict-banner { border-radius: var(--corner-card); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); border-left: var(--line-warning) solid currentColor; }
.verdict-banner p { margin: 0; }
.verdict-banner .verdict-words { font-weight: var(--weight-strong); }
.verdict-banner details { margin-top: var(--space-2); color: var(--colour-words); }
.verdict-banner[data-verdict="met"] { color: var(--colour-verdict-met); background: var(--colour-verdict-met-wash); }
.verdict-banner[data-verdict="not-met"] { color: var(--colour-verdict-not-met); background: var(--colour-verdict-not-met-wash); }
.verdict-banner[data-verdict="not-checked"] { color: var(--colour-verdict-not-checked); background: var(--colour-verdict-not-checked-wash); }
.card.happy { border-color: var(--colour-button); }
.button-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }

/* ---- minionhub's own next line at each step ---- */
.next-line {
  margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  border-left: var(--line-warning) solid var(--colour-button); background: var(--colour-next-line-wash);
  border-radius: 0 var(--corner-button) var(--corner-button) 0; font-weight: var(--weight-strong);
}
.talk-messages .next-line { margin: var(--space-3) 0 0; }

/* ---- what an agent produced, laid out ---- */
.result-file { margin: 0 0 var(--space-5); }
.result-file-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: 0 0 var(--space-2); border-bottom: var(--line-thin) solid var(--colour-line); margin: 0 0 var(--space-3); }
/* A SPREADSHEET FOLDED ON LOAD - entry 98: its name, size and Download above, one press opens the table. */
.sheet-fold > summary { list-style: none; margin: 0 0 var(--space-3); }
.sheet-fold > summary::-webkit-details-marker { display: none; }
.sheet-fold[open] [data-when-folded], .sheet-fold:not([open]) [data-when-open] { display: none; }
.result-text { overflow-wrap: anywhere; }
.result-text h3 { font-size: var(--result-heading-size); margin: var(--space-4) 0 var(--space-2); }
.result-text h4, .result-text h5, .result-text h6 { font-size: var(--result-subheading-size); margin: var(--space-3) 0 var(--space-2); }
.result-text p, .result-text ul, .result-text ol, .result-text blockquote, .result-text pre { margin: 0 0 var(--space-3); }
.result-text ul, .result-text ol { padding-left: var(--space-5); }
.result-text blockquote { border-left: var(--line-warning) solid var(--colour-line); padding: 0 0 0 var(--space-3); color: var(--colour-quiet-words); }
.result-text code { background: var(--colour-code-wash); border-radius: var(--corner-button); padding: 0 var(--space-1); }
.result-text pre { background: var(--colour-code-wash); border-radius: var(--corner-button); padding: var(--space-3); overflow-x: auto; }
.result-text pre code { padding: 0; }
.result-text hr { border: 0; border-top: var(--line-thin) solid var(--colour-line); margin: var(--space-4) 0; }
.table-room { overflow-x: auto; margin: 0 0 var(--space-3); }
.result-text table { border-collapse: collapse; width: 100%; font-size: var(--size-small); }
.result-text th, .result-text td { border: var(--line-thin) solid var(--colour-line); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; overflow-wrap: normal; }
.result-text th { background: var(--colour-panel); font-weight: var(--weight-strong); }

/* ---- MINIONHUB'S OWN TEAM: the org chart, the folded job description and KPIs,
   and what needs Suri - shown only to a record marked as minionhub's own. The
   lines of the chart are drawn by the boxes' own borders: a line across above
   each row, and one down into each box. ---- */
.team-chart { margin: 0 0 var(--space-5); }
.org-scroll { position: relative; overflow-x: auto; padding: 0 0 var(--space-3); }
.org-tree, .org-tree ul { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; }
.org-tree { min-width: max-content; }
.org-tree ul { position: relative; padding-top: var(--org-drop); }
.org-tree li { position: relative; display: flex; flex-direction: column; align-items: center; padding: var(--org-drop) var(--space-1) 0; }
.org-tree li::before, .org-tree li::after {
  content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: var(--org-drop);
  border-top: var(--line-dashed) solid var(--colour-drop-line);
}
.org-tree li::after { right: auto; left: 50%; border-left: var(--line-dashed) solid var(--colour-drop-line); }
.org-tree li:only-child::before, .org-tree li:only-child::after { display: none; }
.org-tree li:only-child { padding-top: 0; }
.org-tree li:first-child::before, .org-tree li:last-child::after { border: 0 none; }
.org-tree li:last-child::before { border-right: var(--line-dashed) solid var(--colour-drop-line); }
.org-tree ul ul::before, .org-tree > li > ul::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 0; height: var(--org-drop);
  border-left: var(--line-dashed) solid var(--colour-drop-line);
}
.org-box {
  display: block; width: var(--org-box-width); box-sizing: border-box; padding: var(--space-3);
  background: var(--colour-card); border: var(--line-thin) solid var(--colour-line); border-radius: var(--corner-card);
  box-shadow: var(--shadow-soft); color: var(--colour-words); text-decoration: none; text-align: left;
  position: relative; z-index: 1; font-size: var(--size-small);
}
a.org-box:hover, a.org-box:focus-visible { border-color: var(--colour-button); }
.org-box p { margin: 0 0 var(--space-1); overflow-wrap: anywhere; }
.org-role { font-weight: var(--weight-strong); }
.org-agent { font-size: var(--size-small); }
.org-state { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.org-open { display: inline-block; margin-top: var(--space-1); font-size: var(--size-small); font-weight: var(--weight-strong); color: var(--colour-button-words); }
.org-box.org-top { background: var(--colour-panel); }
.org-box.vacant { background: var(--colour-panel); box-shadow: var(--shadow-none); border-style: dashed; color: var(--colour-quiet-words); }
.org-flat-group { margin: var(--space-4) 0 0; }
.org-flat-name { font-size: var(--size-words); font-weight: var(--weight-strong); margin: 0 0 var(--space-1); }
.org-flat { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.team-status, .probation-badge {
  display: inline-block; font-size: var(--size-small); font-weight: var(--weight-strong);
  padding: 0 var(--space-2); border-radius: var(--corner-button);
}
.team-status[data-team-status="allWell"] { color: var(--colour-status-ready); background: var(--colour-status-ready-wash); }
.team-status[data-team-status="needsYou"] { color: var(--colour-status-switch-on); background: var(--colour-status-switch-on-wash); }
.team-status[data-team-status="heldUp"] { color: var(--colour-status-trial); background: var(--colour-status-trial-wash); }
.team-status[data-team-status="off"] { color: var(--colour-status-stopped); background: var(--colour-status-stopped-wash); }
.team-status[data-team-status="noReportToday"], .team-status[data-team-status="vacant"] { color: var(--colour-status-described); background: var(--colour-status-described-wash); }
.probation-badge { color: var(--colour-status-try); background: var(--colour-status-try-wash); }
.own-fold { border-top: var(--line-thin) solid var(--colour-line); padding: var(--space-2) 0; }
.own-fold:last-child { border-bottom: var(--line-thin) solid var(--colour-line); }
.own-fold > summary { cursor: pointer; font-weight: var(--weight-strong); font-size: var(--size-card-name); }
.own-fold[open] > summary { margin: 0 0 var(--space-3); }
.own-runs { font-size: var(--size-small); }
.needs-you-from { font-weight: var(--weight-strong); margin: 0; }
/* DIRECT LINES TO SURI: dotted, drawn behind the boxes by the page's script. */
.org-dotted { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; }
.org-dotted-line { fill: none; stroke: var(--colour-status-try); stroke-width: var(--line-dotted); stroke-dasharray: var(--org-dotted-dash); stroke-linecap: round; }
.org-tree { position: relative; z-index: 1; }
.org-direct { display: inline-block; margin: var(--space-1) 0 0; padding: 0 var(--space-1); color: var(--colour-status-try); border: var(--line-dotted) dotted var(--colour-status-try); border-radius: var(--corner-button); }
.org-key { margin: var(--space-3) 0 0; font-size: var(--size-small); color: var(--colour-quiet-words); }
.org-key p { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); }
.org-key-solid, .org-key-dotted { display: inline-block; width: var(--org-key-line); height: 0; }
.org-key-solid { border-top: var(--line-dashed) solid var(--colour-drop-line); }
.org-key-dotted { border-top: var(--line-dotted) dotted var(--colour-status-try); }

/* NOTHING PULSES OR SLIDES FOR A READER WHO ASKED FOR LESS MOTION. */
@media (prefers-reduced-motion: reduce) {
  .status-label::before, .pulse-dot, .wait-bar i { animation: none; }
}

/* ---- a phone ---- */
@media (max-width: 760px) {
  .band-top { padding: 0 var(--space-3); }
  .menu-button {
    display: inline-flex; align-items: center; gap: var(--space-2);
    height: var(--button-height); margin: var(--space-2) 0;
    background: transparent; border: var(--line-thin) solid var(--colour-line);
    border-radius: var(--corner-button); padding: 0 var(--space-3); font: inherit; cursor: pointer;
  }
  .has-script .menu:not(.open) .menu-list { display: none; }
  /* WITHOUT THE SCRIPT the phone's menu cannot fold, so it does not stay on screen either. */
  :root:not(.has-script) .menu { position: static; }
  /* AN OPEN MENU ON A PHONE SCROLLS WITHIN ITSELF, and never runs under the bottom band. */
  .menu.open .menu-list { max-height: calc(100vh - var(--band-top-height) - var(--band-bottom-height) - var(--menu-height)); overflow-y: auto; }
  @supports (height: 100dvh) {
    .menu.open .menu-list { max-height: calc(100dvh - var(--band-top-height) - var(--band-bottom-height) - var(--menu-height)); }
  }
  .menu-list { flex-direction: column; }
  .side-by-side { grid-template-columns: 1fr; }
  .pairs { grid-template-columns: 1fr; }
  .agent-cards, .empty-tiles, .side-card-layout, .tiles { grid-template-columns: 1fr; }
  .steps-bar { gap: var(--space-2); }
  .build { display: flex; flex-direction: column; }
  .talk { height: auto; }
  .talk-messages { max-height: none; }
  .has-script .build.design-ready .talk > .so-far-button { display: none; }
  .has-script .build.design-ready .design-ready-bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
    border: var(--line-thin) solid var(--colour-button); border-radius: var(--corner-card);
    background: var(--colour-card); padding: var(--space-3); margin: 0 0 var(--space-3);
  }
  .design-ready-bar p { margin: 0; }
  .typing { bottom: calc(var(--band-bottom-height) + var(--space-2)); }
  .so-far-button { display: inline-flex; margin: 0 0 var(--space-3); }
  .has-script .so-far { display: none; }
  .has-script .so-far.open {
    display: block; position: fixed; z-index: 30;
    top: var(--band-top-height); bottom: var(--band-bottom-height); left: 0; right: 0;
    background: var(--colour-page); padding: var(--space-4); overflow-y: auto;
  }
  .so-far-close { display: inline-flex; margin: 0 0 var(--space-3); }
  .card-buttons { justify-content: stretch; }
  .card-buttons .button { flex: 1 1 auto; }
}