/* ==========================================================================
   Carth guided demo, by Carthagent.

   Loaded on top of ../styles.css, which owns the palette, the type, the header
   and the footer. Nothing new is invented here: every colour below is one of
   the site tokens, and every pair carries its measured ratio in the comment
   beside it.

   Two rules from the brand system shape this file:

   1. No animation outside the one @media (prefers-reduced-motion: no-preference)
      block at the bottom. Switch reduced motion on and none of it is parsed, so
      the page runs zero animations rather than instant ones. The still frame is
      the design: every step reads with no motion and with no scripting at all.

   2. The demo imitates the cockpit rather than copying it. The sidebar is the
      product's own four groups on a white panel beside a warm content area, the
      mission card is a flatter version of a real mission, and the evidence strip
      reuses the site's drawn thumbnails. It is a drawing, not a screenshot.
   ========================================================================== */

/* The lead-in above the cockpit ------------------------------------------- */

.demo-top { padding: clamp(2.25rem, 1.5rem + 3vw, 3.5rem) 0 clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.demo-top h1 { max-width: 18ch; }
.demo-top .lede { margin-top: 1rem; }

.demo-wrap { padding-bottom: clamp(3rem, 2rem + 4vw, 5rem); }

/* The cockpit frame -------------------------------------------------------- */

.dm {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

.dm-chrome { border-bottom: 1px solid var(--line); padding: 0.9rem 1rem 0.75rem; }

/* The progress bar. Six segments, each a button: the ones behind you and the
   one you are on can be pressed, the ones ahead are inert until you reach them.
   The rule above each segment is the fill, so the bar is the map and the map is
   the control. */
.dm-prog ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.35rem;
}
.dm-prog li { flex: 1 1 0; min-width: 0; }

.dm-seg {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  width: 100%;
  padding: 0.55rem 0.2rem 0.35rem;
  background: transparent;
  border: 0;
  border-top: 3px solid var(--line);
  border-radius: 2px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);                    /* 8.78:1 on --card */
  text-align: left;
  cursor: pointer;
}
.dm-seg:disabled { cursor: default; }
.dm-seg[data-state="done"] { border-top-color: var(--accent); }        /* shape, 4.66:1 on --line */
.dm-seg[data-state="current"] { border-top-color: var(--accent); color: var(--ink); } /* 16.60:1 on --card */
.dm-seg:hover:not(:disabled) { color: var(--ink); }
.dm-seg:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.dm-seg-n { font-family: var(--mono); font-size: 0.72rem; color: var(--accent-strong); } /* 7.85:1 on --card */
.dm-seg:disabled .dm-seg-n { color: var(--muted); }
.dm-seg-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 620px) {
  .dm-seg-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .dm-seg { justify-content: center; padding: 0.5rem 0 0.3rem; }
}

.dm-chrome-foot {
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
}

/* The honest label. Purple because it is structure, not a warning and not an
   approval, and it says the same thing on every step. */
.dm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.25rem 0.7rem 0.25rem 0.55rem;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-strong);            /* 6.88:1 on --accent-soft */
  line-height: 1.45;
}
.dm-badge svg { flex: 0 0 auto; }

.dm-chrome-act { display: flex; align-items: center; gap: 0.9rem; margin-left: auto; }

/* A button that reads as a link, used for every quiet action on this page. */
.dm-link {
  background: transparent;
  border: 0;
  padding: 0.2rem 0;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-strong);            /* 7.85:1 on --card */
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.dm-link:hover { color: var(--ink); }
.dm-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Sidebar and stage -------------------------------------------------------- */

.dm-body { display: grid; grid-template-columns: 226px minmax(0, 1fr); }

.dm-side {
  border-right: 1px solid var(--line);
  padding: 1rem 0.75rem 1.25rem;
  background: var(--card);
}
.dm-side ul { list-style: none; margin: 0; padding: 0; }
/* The icon sprite. Kept out of the flow rather than display:none, because a
   symbol inside a hidden subtree is not reliably referenceable everywhere. */
.dm-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.dm-side-role {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  padding: 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);                    /* 8.78:1 on --card */
}
.dm-side-who {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);            /* 6.88:1 on --accent-soft */
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}

.dm-navgroup { margin-bottom: 1rem; }
.dm-navlabel {
  margin: 0 0 0.3rem;
  padding: 0 0.6rem;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);                    /* 8.78:1 on --card */
}
/* Seven of these are real: they are buttons and they open a chapter. The rest
   are drawn, because a destination this tour does not visit should still be on
   the map. Both shapes are the same row, so the sidebar reads as one list, and
   the rows inside the account menu are the same row again. */
.dm-navitem {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  color: var(--muted);                    /* 8.78:1 on --card */
}
.dm-navitem svg { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
button.dm-navitem { cursor: pointer; }
button.dm-navitem:hover { background: var(--surface); color: var(--ink); } /* 15.24:1 on --surface */
button.dm-navitem:focus-visible { outline: 3px solid var(--accent); outline-offset: -1px; }
/* A destination the tour does not open. Same row, no press, and the note under
   the sidebar says why rather than leaving a visitor guessing. */
.dm-navitem.is-dead { color: var(--muted); opacity: 0.55; }
.dm-navitem.is-on {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  color: var(--accent-strong);            /* 6.88:1 on --accent-soft */
}
button.dm-navitem.is-on:hover { background: var(--accent-soft); color: var(--accent-strong); }

/* The account menu, which is the foot of the real sidebar. Configuration is not
   a nav group in the cockpit: Settings and its sections are reached from here,
   and so are the theme, the build and the way out. It is drawn open, because a
   menu drawn shut would say nothing about where Rules, Automations and Users
   went. Same rows as the nav above it, one indent deeper for the sections. */
.dm-side-foot {
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.dm-side-me {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  padding: 0 0.5rem;
}
/* The monogram. There is no photo anywhere in the product, so initials on the
   accent tint are the whole mark. */
.dm-side-face {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);            /* 6.88:1 on --accent-soft */
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.dm-side-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);                      /* 16.60:1 on --card */
}
.dm-side-sub { margin-left: 1.05rem; }
.dm-side-build code {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
}

.dm-side-note {
  margin: 1.25rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--muted);                    /* 8.78:1 on --card */
}

/* The mobile stand-in for the sidebar: one line saying where in the cockpit
   this is. The full sidebar is furniture, and furniture is what a 390px screen
   gives up first. */
.dm-side-mob { display: none; }

.dm-stage {
  background: var(--surface);
  padding: clamp(1.1rem, 0.8rem + 1.4vw, 1.9rem);
  min-height: 30rem;
}

@media (max-width: 860px) {
  .dm-body { grid-template-columns: minmax(0, 1fr); }
  .dm-side {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0.7rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
  }
  .dm-side .dm-navgroup, .dm-side .dm-side-note, .dm-side .dm-side-menu { display: none; }
  .dm-side-role { margin: 0; padding: 0; }
  .dm-side-foot { margin: 0; padding: 0; border-top: 0; }
  .dm-side-me { margin: 0; padding: 0; }
  .dm-side-mob {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-strong);          /* 6.88:1 on --accent-soft */
    background: var(--accent-soft);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
  }
  .dm-side-mob svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .dm-stage { min-height: 0; }
}

/* Steps -------------------------------------------------------------------- */

/* Without scripting every step is on the page, in order, separated by a rule.
   The hiding below is scoped to .js, which is set before the body renders. */
.dm-step + .dm-step { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line-strong); }
.js .dm-step { display: none; }
.js .dm-step.is-on { display: block; margin-top: 0; padding-top: 0; border-top: 0; }

.dm-kicker {
  margin: 0 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-strong);            /* 7.21:1 on --surface */
}
.dm-step h2 { font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.85rem); max-width: 34ch; }
.dm-step h2:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.dm-say { margin: 0.8rem 0 0; max-width: 56ch; color: var(--muted); } /* 8.07:1 on --surface */

/* The small print that keeps this page honest. It is a quote rule rather than
   a box so it never competes with the mission card above it. */
.dm-fine {
  margin: 1.4rem 0 0;
  max-width: 62ch;
  padding-left: 0.85rem;
  border-left: 3px solid var(--accent-line);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted);                    /* 8.07:1 on --surface */
}

.dm-act { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.6rem; }
.dm-act[hidden] { display: none; }
.dm-act-end { gap: 1.1rem; }

/* Step 1: the three things that happen, in order, because they are an order. */
.dm-map {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin: 1.5rem 0 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);                    /* 8.07:1 on --surface */
}
.dm-map span { display: inline-flex; align-items: center; gap: 0.75rem; }
.dm-map span + span::before { content: ""; width: 14px; height: 1px; background: var(--line-strong); }

/* Step 2: the engines ------------------------------------------------------ */

.dm-pick { margin: 1.5rem 0 0; padding: 0; border: 0; }
.dm-pick legend {
  padding: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);                    /* 8.07:1 on --surface */
}
.dm-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }

.dm-chip {
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);                      /* 16.60:1 on --card */
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
}
.dm-chip:hover { border-color: var(--accent); }
.dm-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dm-chip[aria-checked="true"] {
  color: var(--accent-strong);            /* 6.88:1 on --accent-soft */
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.dm-quiet {
  margin: 1.9rem 0 0;
  padding: 1rem 1.1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
}
.dm-quiet-h {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);                    /* 8.07:1 on --surface */
}
.dm-chips-dead { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.8rem; }
/* Broken outline, no fill, no press: the same device the providers diagram on
   the home page uses for a provider nothing is dispatched to. */
.dm-chip-dead {
  color: var(--muted);                    /* 8.07:1 on --surface */
  background: transparent;
  border-style: dashed;
  cursor: default;
}
.dm-quiet .dm-fine { margin-top: 0; padding-left: 0; border-left: 0; }

/* Step 3: the brief -------------------------------------------------------- */

.dm-brief {
  margin-top: 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem 1.15rem;
}
.dm-brief label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--ink);                      /* 16.60:1 on --card */
}
.dm-brief input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.85rem;
}
.dm-brief input:hover { border-color: var(--accent); }
.dm-brief input:focus { border-color: var(--accent); outline: 3px solid var(--accent); outline-offset: 1px; }

.dm-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.3rem;
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);                    /* 8.78:1 on --card */
}
.dm-meta b { color: var(--ink); font-weight: 650; }

/* The mission card --------------------------------------------------------- */

.dm-card {
  margin-top: 1.5rem;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem 1.25rem;
}
.dm-card-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.dm-id {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--muted);                    /* 8.78:1 on --card */
}
.dm-card-title { font-family: var(--sans); font-size: 0.98rem; font-weight: 650; line-height: 1.35; flex: 1 1 14rem; }

/* One pill, three states, each in the colour the site already uses for that
   idea: purple while it is being planned, clay while the crew is working,
   green once a person can act on it. */
.dm-status {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  white-space: nowrap;
  color: var(--accent-strong);            /* 6.88:1 on --accent-soft */
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.dm-status[data-state="running"] {
  color: var(--warm);                     /* 5.30:1 on --warm-soft */
  background: var(--warm-soft);
  border-color: var(--warm-line);
}
.dm-status[data-state="review"] {
  color: var(--ok);                       /* 5.77:1 on --ok-soft */
  background: var(--ok-soft);
  border-color: var(--ok-line);
}

/* The three stages. A dot per stage: hollow while it is ahead, clay while it
   is the one running, and a filled green tick once it is behind you. */
.dm-rail {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin: 1rem 0 0;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);                    /* 8.78:1 on --card */
}
.dm-rail li { display: flex; align-items: center; gap: 0.5rem; }
.dm-rail-dot {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
}
.dm-rail li[data-on] { color: var(--warm); }             /* 5.90:1 on --card */
.dm-rail li[data-on] .dm-rail-dot { border-color: var(--warm); background: var(--warm); }
.dm-rail li[data-done] { color: var(--ok); }             /* 6.46:1 on --card */
.dm-rail li[data-done] .dm-rail-dot {
  border-color: var(--ok);
  background: var(--ok);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M3.4 6.6 5.3 8.5 9.2 4.3' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}

/* The crew, drawn the way the harbour draws them: a disc, two eyes and one
   distinguishing feature each. One hue per agent, so four agents read as four
   people. The one not on this mission keeps the drawing and loses the colour. */
.dm-crew {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.5rem;
  margin: 1.2rem 0 0;
  padding: 0.95rem 0 0;
  border-top: 1px solid var(--line);
}
.dm-mate { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.dm-mate { --c: var(--accent); }                         /* 5.91:1 on --card */
.dm-mate-build { --c: var(--warm); }                     /* 5.90:1 on --card */
.dm-mate-review { --c: var(--teal); }                    /* 6.92:1 on --card */
.dm-mate-report { --c: var(--info); }                    /* 10.08:1 on --card */
.dm-mate svg { flex: 0 0 auto; }
.dm-mate .disc { fill: var(--card); stroke: var(--c); stroke-width: 2; }
.dm-mate .halo { fill: none; stroke: var(--c); stroke-width: 1.5; opacity: 0; }
.dm-mate .eye { fill: var(--c); }
.dm-mate .brow { stroke: var(--c); stroke-width: 2.2; stroke-linecap: round; fill: none; }
.dm-mate .mouth { stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.dm-mate-report .mouth { fill: var(--c); stroke: none; }
.dm-mate-n { font-size: 0.85rem; font-weight: 650; color: var(--c); }
.dm-mate-e {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);                    /* 8.78:1 on --card */
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}
.dm-mate.is-off { --c: var(--muted); }                   /* 8.78:1 on --card */
.dm-mate.is-off .disc { stroke: var(--line-strong); }
.dm-mate.is-off .eye, .dm-mate.is-off .mouth { fill: var(--line-strong); stroke: var(--line-strong); }

.dm-logh {
  margin: 1.3rem 0 0.55rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);                    /* 8.78:1 on --card */
}

/* The log. Plain sentences, one per line, each stamped with how far into the
   mission it happened. Nothing in it is jargon a founder would have to look up. */
.dm-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.dm-log li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.5rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-line);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);                      /* 15.24:1 on --surface */
}
.dm-log .dm-t {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);                    /* 8.07:1 on --surface */
}
.js .dm-log li[data-wait] { display: none; }

/* The gate ----------------------------------------------------------------- */

.dm-diff {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  margin: 1rem 0 0;
  padding: 0.6rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 0.79rem;
  color: var(--muted);                    /* 8.07:1 on --surface */
}
.dm-diff-n { color: var(--ink); font-weight: 600; }      /* 15.24:1 on --surface */
.dm-plus { color: var(--ok); }                           /* 5.93:1 on --surface */
.dm-minus { color: var(--hold); }                        /* 4.93:1 on --surface */
.dm-branch { margin-left: auto; }

.dm-evsub { margin: 0 0 0.6rem; font-size: 0.83rem; color: var(--muted); } /* 8.78:1 on --card */
.dm-ev { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .dm-ev { grid-template-columns: minmax(0, 1fr); } }

/* Two fills the site's thumbnails did not need before: a clay block for the
   call to action inside a drawing, and a warm wash behind the banner. The clay
   block carries meaning and clears the 3:1 bar for a shape at 5.90:1 on --card.
   The wash and the field outlines are ground rather than mark, exactly like the
   existing --accent-line bars in these thumbnails, so the reading is done by the
   solid marks sitting on them. */
.thumb .bar-warm { fill: var(--warm); }                  /* 5.90:1 on --card */
.thumb .warm-soft { fill: var(--warm-soft); stroke: var(--warm-line); }
.thumb .card-box { fill: var(--surface); stroke: var(--line-strong); }
.thumb .field-box { fill: var(--surface); stroke: var(--line-strong); }

.dm-gate {
  margin-top: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  border: 1px solid var(--ok-line);
  background: var(--ok-soft);
  border-radius: var(--radius-sm);
  padding: 0.95rem 1rem;
}
.dm-gate-q { margin: 0; font-size: 1.02rem; font-weight: 650; color: var(--ink); } /* 14.82:1 on --ok-soft */
.dm-gate-act { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.dm-gate-who { margin: 0 0 0 auto; font-size: 0.78rem; color: var(--muted); } /* 7.84:1 on --ok-soft */

/* The one green button on the site. White on --ok is 6.46:1, and the darker
   hover keeps it there. */
.btn-ok { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn-ok:hover { background: #185639; color: #fff; }      /* white on it is 8.30:1 */
.dm-gate .btn-secondary { background: var(--card); }

.dm-back {
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--warm);                     /* 5.90:1 on --card */
}
.dm-gate[data-busy] .dm-gate-act { visibility: hidden; }

.dm-round {
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--warm-line);
  background: var(--warm-soft);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink);                      /* 14.91:1 on --warm-soft */
}
.dm-round[hidden], .dm-back[hidden] { display: none; }

/* Step 6 ------------------------------------------------------------------- */

.dm-done { display: grid; justify-items: start; gap: 0.6rem; }
.dm-done h2 { margin: 0; font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem); }
.dm-tick { display: block; }
.dm-tick-disc { fill: var(--ok-soft); stroke: var(--ok); stroke-width: 2; }
.dm-tick-mark { fill: none; stroke: var(--ok); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

.dm-recap { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0.75rem; max-width: 60ch; }
.dm-recap li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--muted);                    /* 8.07:1 on --surface */
}
.dm-recap li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--ok);            /* shape, 5.93:1 on --surface */
}
.dm-recap b { color: var(--ink); font-weight: 650; }     /* 15.24:1 on --surface */

/* The step index ----------------------------------------------------------- */

.dm-index {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(26, 23, 20, 0.55);
}
.dm-index[hidden] { display: none; }
.dm-index-box {
  width: min(26rem, 100%);
  max-height: 100%;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem;
}
.dm-index-box h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.dm-index-box ul { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.3rem; }
.dm-index-box ul button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.7rem;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink);                      /* 16.60:1 on --card */
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.dm-index-box ul button:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.dm-index-box ul button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dm-index-box ul button[aria-current="step"] { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.dm-index-foot { display: flex; align-items: center; gap: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.dm-index-foot .dm-link { margin-left: auto; }
.dm-index-hint { margin: 0; font-size: 0.8rem; color: var(--muted); }  /* 8.78:1 on --card */

/* Seven chapters, and the six steps of the first one folded underneath it. The
   numbers are on the chapters because a chapter list is an order; the steps
   inside chapter one already carry their own count on the panel. */
.dm-index-chaps > li > button { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.1rem 0.6rem; }
.dm-ix-n {
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-strong);            /* 7.85:1 on --card */
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
}
.dm-index-chaps small { grid-column: 2; font-size: 0.79rem; font-weight: 400; color: var(--muted); } /* 8.78:1 on --card */
.dm-index-chaps > li > button[aria-current="step"] small { color: var(--accent-strong); }
.dm-index-sub {
  margin: 0.2rem 0 0.35rem 1.3rem !important;
  padding-left: 0.8rem !important;
  border-left: 1px solid var(--line-strong);
  gap: 0.1rem !important;
}
.dm-index-sub button { font-size: 0.87rem !important; font-weight: 500 !important; padding: 0.4rem 0.6rem !important; color: var(--muted) !important; } /* 8.78:1 on --card */
.dm-index-sub button:hover, .dm-index-sub button[aria-current="step"] { color: var(--accent-strong) !important; }

/* ==========================================================================
   Chapters two to eight

   The mission run above is a sequence, so it is drawn as steps. These are
   rooms, so they are drawn as scenes: a heading, then two to four BEATS that
   arrive one after another. A beat is a block of the document, visible by
   default and hidden only by data-wait while scripting is on, so the no-script
   page and the reduced-motion page are the same page with everything shown.

   No new colour is invented below. Every value is a site token and every pair
   carries the ratio measured against the ground it actually sits on.
   ========================================================================== */

.js .dm-beat[data-wait] { display: none; }

.dm-beats { display: grid; gap: 1.5rem; margin-top: 1.6rem; }

/* Each beat is a panel on the warm stage, so the beats read as a stack of
   moments rather than one long page of prose. */
.dm-beat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem 1.25rem;
}
.dm-beat-h {
  margin: 0 0 0.75rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-strong);            /* 7.85:1 on --card */
}
.dm-beat-say {
  margin: 0.9rem 0 0;
  max-width: 62ch;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);                    /* 8.78:1 on --card */
}
.dm-beat-say + .dm-beat-say { margin-top: 0.6rem; }

/* The beat count, sitting on the kicker so a visitor knows how long a chapter
   is before it starts. */
.dm-beats-n {
  margin-left: 0.6rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--line-strong);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);                    /* 8.07:1 on --surface */
}

/* Small shared furniture ---------------------------------------------------- */

.dm-chiprow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  margin: 0.9rem 0 0;
}
.dm-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  white-space: nowrap;
  color: var(--accent-strong);            /* 6.88:1 on --accent-soft */
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.dm-tag-c3 { color: var(--teal); background: var(--card); border-color: var(--teal); }   /* 6.92:1 on --card */
.dm-tag-c4 { color: var(--info); background: var(--card); border-color: var(--info); }   /* 10.08:1 on --card */
.dm-tag-note { font-size: 0.8rem; color: var(--muted); }  /* 8.78:1 on --card */

/* An engine name, wherever one is named. Claude is the locked default so it
   takes the structural purple; a second provider takes clay, the colour this
   site already gives to work being done somewhere else. */
.dm-eng {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent-strong);            /* 6.88:1 on --accent-soft */
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  white-space: nowrap;
}
.dm-eng-alt {
  color: var(--warm);                     /* 5.30:1 on --warm-soft */
  background: var(--warm-soft);
  border-color: var(--warm-line);
}

/* A button that is drawn, not wired: it shows what the real panel offers at
   this moment without pretending this page can do it. */
.dm-fakebtn {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-strong);            /* 6.88:1 on --accent-soft */
}

/* An on switch, drawn. Green, because it is the colour of a yes on this site. */
.dm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--ok);                       /* 6.46:1 on --card */
}
.dm-toggle-box {
  width: 26px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--ok-soft);
  border: 1.5px solid var(--ok);          /* shape, 6.46:1 on --card */
  position: relative;
}
.dm-toggle-box::after {
  content: "";
  position: absolute;
  top: 1.5px;
  right: 1.5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}

/* Tiles: the four number panels the cockpit puts above a table. */
.dm-tiles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 1.1rem 0 0;
  padding: 0;
}
@media (max-width: 700px) { .dm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dm-tiles li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
}
.dm-tiles b {
  display: block;
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);                      /* 15.24:1 on --surface */
}
.dm-tiles span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);                    /* 8.07:1 on --surface */
}
.dm-tiles small {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--muted);                    /* 8.07:1 on --surface */
}
.dm-tiles li[data-tone="ok"] { border-left-color: var(--ok); }      /* shape, 5.93:1 on --surface */
.dm-tiles li[data-tone="ok"] b { color: var(--ok); }                /* 5.93:1 on --surface */
.dm-tiles li[data-tone="hold"] { border-left-color: var(--hold); }  /* shape, 4.93:1 on --surface */
.dm-tiles li[data-tone="hold"] b { color: var(--hold); }            /* 4.93:1 on --surface */
.dm-est {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);                    /* 8.07:1 on --surface */
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  vertical-align: middle;
}

/* Tables. The cockpit is full of them and they are the honest way to show a
   matrix or a bill, so they are drawn as tables rather than as pictures. */
.dm-tablewrap { margin-top: 1rem; overflow-x: auto; }
.dm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.dm-table-cap {
  caption-side: top;
  text-align: left;
  padding-bottom: 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);                    /* 8.78:1 on --card */
}
.dm-table th, .dm-table td {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.dm-table thead th {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);                    /* 8.78:1 on --card */
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.dm-table tbody th {
  font-weight: 650;
  color: var(--ink);                      /* 16.60:1 on --card */
}
.dm-table tbody td { color: var(--ink); } /* 16.60:1 on --card */
.dm-table code {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--muted);                    /* 8.78:1 on --card */
}
.dm-table-num td:not(:first-child), .dm-table-num thead th:not(:first-child) {
  font-family: var(--mono);
  white-space: nowrap;
}
/* An expanded row: the agents inside one mission. Indented and quieter, the
   way the real panel opens a mission. */
.dm-table .dm-sub th, .dm-table .dm-sub td { color: var(--muted); font-weight: 500; } /* 8.78:1 on --card */
.dm-table .dm-sub th { padding-left: 1.6rem; }
.dm-table .dm-sub th::before { content: ""; }
.dm-sub-note { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); } /* 8.78:1 on --card */
.dm-best {
  margin-left: 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ok);                       /* 6.46:1 on --card */
  background: var(--ok-soft);
  border: 1px solid var(--ok-line);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  white-space: nowrap;
}
.dm-mode {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-strong);            /* 6.88:1 on --accent-soft */
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
}

/* Chapter two: the council -------------------------------------------------- */

/* The mechanism, drawn once: one plan out to three seats, the links between the
   seats struck through, and the two things that come back. It is the site's own
   .diagram language (styles.css) with the few additions this drawing needs, so
   the council is the same hand that drew the isolation diagram on the trust
   page.

   The drawing carries the MECHANISM and never a result. The verdicts are words,
   in the beat below it, where the scripted label at the top of the cockpit is on
   screen at the same time: a drawn verdict would read as a measurement.

   No new colour. Every value is a site token and every pair carries the ratio
   measured against the ground it actually sits on. */
.dm-council { margin-bottom: 0.7rem; }
.dm-council .seat { fill: var(--card); stroke: var(--accent); stroke-width: 1.5; }   /* shape, 5.91:1 on --card */
.dm-council .flow { stroke: var(--muted); stroke-width: 1.5; fill: none; }           /* shape, 8.78:1 on --card */
.dm-council .arrow { fill: var(--muted); }
.dm-council .cut { stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 4 4; fill: none; }
.dm-council .cut-x { stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; fill: none; }

/* The two outcomes. The soft fill names the tone and the full-strength outline
   gives the box its shape: --ok-line and --warm-line are 1.39:1 on the white
   beat behind them, well under the 3:1 a shape needs, so the outline is the
   colour itself. */
.dm-council .box-ok { fill: var(--ok-soft); stroke: var(--ok); stroke-width: 1.5; }       /* shape, 6.46:1 on --card */
.dm-council .box-warm { fill: var(--warm-soft); stroke: var(--warm); stroke-width: 1.5; } /* shape, 5.90:1 on --card */
.dm-council .name-ok { fill: var(--ok); }        /* 5.77:1 on --ok-soft */
.dm-council .name-warm { fill: var(--warm); }    /* 5.30:1 on --warm-soft */
/* .diagram .label is --muted: 7.84:1 on --ok-soft and 7.89:1 on --warm-soft. */

/* A verdict, on the seat that held it. The roster pill in the two tones the
   cockpit already gives a verdict: the green it uses for work that passed, and
   the warm it uses for work that is not finished with you yet. */
.dm-cat-ok { color: var(--ok); background: var(--ok-soft); }        /* 5.77:1 on --ok-soft */
.dm-cat-warm { color: var(--warm); background: var(--warm-soft); }  /* 5.30:1 on --warm-soft */

/* Chapter three: the code map ------------------------------------------------ */

/* The same drawing the home page carries, moved onto a light ground. The hero
   colours the communities with the dark-ground crew hues; here each takes its
   light-ground twin, so a community is the same character in both places. */
.dm-graph-wrap { margin-top: 0.4rem; }
.dm-cgraph {
  display: block;
  width: 100%;
  height: auto;
  max-height: 22rem;
  background: var(--card);
}
.dm-cgraph .cl { --c: var(--accent); }        /* 5.91:1 on --card */
.dm-cgraph .c2 { --c: var(--warm); }          /* 5.90:1 on --card */
.dm-cgraph .c3 { --c: var(--teal); }          /* 6.92:1 on --card */
.dm-cgraph .c4 { --c: var(--info); }          /* 10.08:1 on --card */
.dm-cgraph .c5 { --c: var(--ok); }            /* 6.46:1 on --card */
.dm-cgraph .c6 { --c: var(--accent-strong); } /* 7.85:1 on --card */
.dm-cgraph .cl circle { fill: var(--c); }
.dm-cgraph .link { stroke: var(--c); stroke-width: 0.7; fill: none; }
/* The lines that leave a community carry meaning, so they are held to the 3:1
   bar for a shape rather than dropped to a hairline. */
.dm-cgraph .link-far { stroke: #8f887f; stroke-width: 0.7; fill: none; } /* 3.50:1 on --card */

/* Beat two dims everything but one community. This is a state, not a motion:
   it is correct with animation switched off and it is the still frame the
   reduced-motion reader sees. */
.dm-cgraph[data-focus="c3"] .cl:not(.c3) { opacity: 0.16; }
.dm-cgraph[data-focus="c3"] .link-far { opacity: 0.2; }

.dm-graph-cap {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted);                    /* 8.78:1 on --card */
}

.dm-node {
  margin-top: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);      /* shape, 6.36:1 on --surface */
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
}
.dm-node-h { margin: 0; font-family: var(--mono); font-size: 0.9rem; color: var(--ink); } /* 15.24:1 on --surface */
.dm-node-kv { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.dm-node-kv li { display: flex; gap: 0.8rem; align-items: baseline; font-size: 0.86rem; }
.dm-node-kv span { flex: 0 0 8.5rem; color: var(--muted); }  /* 8.07:1 on --surface */
.dm-node-kv b { color: var(--ink); font-weight: 650; }       /* 15.24:1 on --surface */
.dm-node-note { margin: 0.9rem 0 0; font-size: 0.83rem; line-height: 1.55; color: var(--muted); } /* 8.07:1 on --surface */

/* Chapter four: the crew -------------------------------------------------- */

.dm-roster { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.dm-roster li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  padding: 0.55rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.87rem;
  color: var(--muted);                    /* 8.07:1 on --surface */
}
.dm-roster b { color: var(--ink); font-weight: 650; }  /* 15.24:1 on --surface */
.dm-cat {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-strong);            /* 6.88:1 on --accent-soft */
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}

.dm-persona { margin-top: 1rem; }
.dm-persona-brief {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.85rem;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);                      /* 15.24:1 on --surface */
}
.dm-persona-brief span {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);                    /* 8.07:1 on --surface */
}
.dm-persona-card {
  margin: 0;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.dm-persona-card > div {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.55rem 0.85rem;
  font-size: 0.87rem;
}
.dm-persona-card > div + div { border-top: 1px solid var(--line); }
.dm-persona-card dt {
  flex: 0 0 9rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);                    /* 8.78:1 on --card */
}
.dm-persona-card dd { margin: 0; color: var(--ink); }  /* 16.60:1 on --card */
.dm-persona-card code {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--accent-strong);            /* 6.88:1 on --accent-soft */
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
}
.dm-persona-act { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem 1rem; margin: 0.9rem 0 0; }
@media (max-width: 560px) {
  .dm-persona-card > div { display: block; }
  .dm-persona-card dt { margin-bottom: 0.2rem; }
}

/* Chapter five: the rules -------------------------------------------------- */

.dm-cards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin-top: 0.4rem; }
@media (max-width: 700px) { .dm-cards2 { grid-template-columns: minmax(0, 1fr); } }

.dm-gcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.85rem 0.95rem 0.95rem;
}
.dm-gcard[data-kind="guard"] { border-left-color: var(--hold); }   /* shape, 4.93:1 on --surface */
.dm-gcard[data-kind="skill"] { border-left-color: var(--accent); } /* shape, 5.42:1 on --surface */
.dm-gcard[data-kind="rule"] { border-left-color: var(--info); }    /* shape, 9.26:1 on --surface */
.dm-gcard-h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 650;
  color: var(--ink);                      /* 15.24:1 on --surface */
}
.dm-gcard-h code { font-family: var(--mono); font-size: 0.92rem; }
.dm-gcard-t {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);                    /* 8.07:1 on --surface */
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}
.dm-gcard-meta { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--muted); } /* 8.07:1 on --surface */
.dm-gcard-meta code { font-family: var(--mono); font-size: 0.76rem; }
.dm-gcard-say { margin: 0.6rem 0 0; font-size: 0.87rem; line-height: 1.55; color: var(--muted); } /* 8.07:1 on --surface */

/* The block. Clay for the budget, which is work stopping; the hold red for a
   guard, which is the site's colour for a required or blocked marker. */
.dm-blocks { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.dm-blocks li {
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
}
.dm-blocks li[data-kind="guard"] { border-color: var(--hold); }        /* shape, 4.93:1 on --surface */
.dm-blocks li[data-kind="budget"] { border-color: var(--warm-line); background: var(--warm-soft); }
.dm-block-h { margin: 0; font-size: 0.95rem; font-weight: 650; color: var(--ink); } /* 15.24:1 on --surface */
.dm-blocks li[data-kind="guard"] .dm-block-h { color: var(--hold); }   /* 4.93:1 on --surface */
.dm-blocks li[data-kind="guard"] .dm-block-h b { color: var(--hold); }
.dm-blocks li[data-kind="budget"] .dm-block-h { color: var(--warm); }  /* 5.30:1 on --warm-soft */
.dm-block-cmd {
  margin: 0.5rem 0 0;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink);                      /* 15.24:1 on --surface, 14.91:1 on --warm-soft */
}
.dm-block-cmd code { font-family: var(--mono); }
.dm-block-say { margin: 0.6rem 0 0; font-size: 0.87rem; line-height: 1.6; color: var(--muted); } /* 8.07:1 on --surface, 7.89:1 on --warm-soft */

/* Chapter six: the routines ------------------------------------------------ */

.dm-routine {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.95rem 1rem 1rem;
}
.dm-routine-h {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin: 0;
  font-size: 1rem;
  color: var(--ink);                      /* 15.24:1 on --surface */
}
.dm-routine-h .dm-toggle { margin: 0 0 0 auto; }
.dm-routine-say { margin: 0.55rem 0 0; font-size: 0.87rem; line-height: 1.55; color: var(--muted); } /* 8.07:1 on --surface */
.dm-routine-sched { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 0; }
.dm-routine-sched span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);                      /* 16.60:1 on --card */
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.7rem;
}
.dm-runs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--line-strong);
}
@media (max-width: 700px) { .dm-runs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dm-runs span {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);                    /* 8.07:1 on --surface */
}
.dm-runs b { display: block; margin-top: 0.25rem; font-size: 0.85rem; font-weight: 650; color: var(--ink); } /* 15.24:1 on --surface */
.dm-ran-ok { color: var(--ok); }          /* 5.93:1 on --surface */

.dm-card-slim { margin-top: 1rem; padding-bottom: 1rem; }
.dm-routine-from { margin: 0.85rem 0 0; font-size: 0.86rem; color: var(--muted); } /* 8.78:1 on --card */
.dm-routine-from b { color: var(--ink); font-weight: 650; }                        /* 16.60:1 on --card */

/* What a routine may and may not do. A list where the mark carries the answer,
   so the sentence does not have to start with a negative to be read as one. */
.dm-nots { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.dm-nots li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);                      /* 16.60:1 on --card */
}
.dm-nots li::before {
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.3rem;
  text-align: center;
  font-weight: 700;
}
.dm-nots li[data-no]::before { content: "\00d7"; color: var(--hold); }  /* 5.37:1 on --card */
.dm-nots li[data-yes]::before { content: "\2713"; color: var(--ok); }   /* 6.46:1 on --card */

/* Chapter eight: the trail ------------------------------------------------- */

.dm-audit { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.4rem; counter-reset: none; }
.dm-audit li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.7rem;
  padding: 0.6rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ok);       /* shape, 5.93:1 on --surface */
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--muted);                    /* 8.07:1 on --surface */
}
.dm-audit b { color: var(--ink); font-weight: 650; }    /* 15.24:1 on --surface */
.dm-audit-w { flex: 0 0 auto; font-family: var(--mono); font-size: 0.76rem; color: var(--muted); }
.dm-audit-o { font-family: var(--mono); font-size: 0.78rem; color: var(--ink); }
.dm-audit-d { margin-left: auto; font-size: 0.78rem; color: var(--muted); }

.dm-shield { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.dm-shield li {
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--muted);                    /* 8.78:1 on --card */
}
.dm-shield li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--accent);        /* shape, 5.91:1 on --card */
}
.dm-shield b { color: var(--ink); font-weight: 650; }   /* 16.60:1 on --card */

.dm-gates { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.6rem; counter-reset: dmg; }
.dm-gates li {
  counter-increment: dmg;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.85rem;
  background: var(--ok-soft);
  border: 1px solid var(--ok-line);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--muted);                    /* 7.84:1 on --ok-soft */
}
.dm-gates li::before {
  content: counter(dmg);
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ok);                       /* 5.77:1 on --ok-soft */
}
.dm-gates b { color: var(--ink); font-weight: 650; }    /* 14.82:1 on --ok-soft */

.dm-done-end { margin: 1.6rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.dm-end-h { margin: 0; font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); }
.dm-done-end .dm-say { color: var(--muted); }           /* 8.78:1 on --card */
.dm-beat .dm-recap li { color: var(--muted); }          /* 8.78:1 on --card */
.dm-beat .dm-recap b { color: var(--ink); }             /* 16.60:1 on --card */

/* The chapter picker on the welcome step ----------------------------------- */

.dm-picker { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.dm-picker-h {
  margin: 0 0 0.9rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);                    /* 8.07:1 on --surface */
}
.dm-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}
@media (max-width: 860px) { .dm-picker-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .dm-picker-list { grid-template-columns: minmax(0, 1fr); } }
.dm-picker-list button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.2rem 0.6rem;
  width: 100%;
  height: 100%;
  text-align: left;
  padding: 0.75rem 0.85rem;
  font: inherit;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.dm-picker-list button:hover { border-color: var(--accent); background: var(--accent-soft); }
.dm-picker-list button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dm-picker-list svg { grid-row: 1; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* shape, 5.91:1 on --card */
.dm-picker-list b { grid-row: 1; font-size: 0.95rem; font-weight: 650; color: var(--ink); } /* 16.60:1 on --card */
.dm-picker-list span { grid-column: 2; font-size: 0.82rem; line-height: 1.45; color: var(--muted); } /* 8.78:1 on --card */

/* The written walkthrough -------------------------------------------------- */

.dm-written {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: dmw;
}
@media (max-width: 980px) { .dm-written { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .dm-written { grid-template-columns: minmax(0, 1fr); } }
/* THIRTEEN CARDS THAT ALL LOOKED THE SAME. The written walkthrough is the version a
   person reads when they will not sit through the guided one, so it is doing real work,
   and it was thirteen identical white rectangles distinguished only by a two-digit
   counter. Nothing on them said which one was about money and which was about security;
   you had to read every heading to find the one you wanted.
   Each card now leads with a drawn glyph of its own subject, and the counter steps back
   to a quiet marker in the top corner - still there, because the order is the argument of
   a walkthrough, but no longer the only thing with any weight on the card. */
.dm-written li {
  counter-increment: dmw;
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
}
/* The border answers on hover, the same way .card does elsewhere on the site. It is the
   one bit of warmth that still works with motion switched off. */
.dm-written li:hover { border-color: var(--accent-line); }
.dm-written li::before {
  /* decimal-leading-zero, not a literal "0" glued to the count: the hardcoded prefix
     read 010, 011, 012, 013 on the last four cards, which is what a walkthrough numbered
     by hand looks like. The counter style pads only what needs padding. */
  content: counter(dmw, decimal-leading-zero);
  position: absolute;
  top: 1.25rem;
  right: 1.3rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);                    /* 8.78:1 on --card, quieter than the glyph */
}
/* The glyph tile. A solid tint, never a gradient, and the mark carries --accent-strong so
   it holds against it (6.88:1, and it is a drawing rather than text). */
.dmw-ico {
  display: block;
  width: 38px; height: 38px; padding: 8px;
  margin-bottom: 0.9rem;
  border-radius: 9px;
  background: var(--tint);
  border: 1px solid var(--accent-line);
  color: var(--accent-strong);
}
.dm-written h3 { font-size: 1.08rem; margin-bottom: 0.4rem; padding-right: 2.2rem; }
.dm-written p { margin: 0; font-size: 0.95rem; color: var(--muted); } /* 8.78:1 on --card */

/* ==========================================================================
   Motion

   Everything that moves on this page is declared here and nowhere else. With
   reduced motion switched on none of it is parsed, the walkthrough advances
   only when a person presses something, and the crew log is written out in
   full the moment the step opens. document.getAnimations() is 0 either way
   once the page is idle.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* A step arriving. One short rise, the same curve as the rest of the site. */
  .js .dm-step.is-on { animation: dmStep 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both; }

  @keyframes dmStep {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }

  /* A log line landing. Each one arrives once and stays; the timing between
     them is the state machine's, not the stylesheet's. */
  .js .dm-log li { animation: dmLine 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) both; }

  @keyframes dmLine {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: none; }
  }

  /* A beat arriving. Slower and longer than a log line, because a beat is a
     paragraph of the argument rather than a tick of a clock. The spacing
     between beats is the state machine's; this is only the arrival. */
  .js .dm-beat { animation: dmBeat 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both; }

  @keyframes dmBeat {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }

  /* The map narrowing to one community. The still frame is the dimmed state,
     which is why the dimming lives outside this block; only the fade between
     the two is here. Fifteen seconds of ambient drift would fight the beat, so
     the drawing does not breathe: it just answers. */
  .dm-cgraph .cl, .dm-cgraph .link-far { transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1); }

  button.dm-navitem { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
  .dm-picker-list button { transition: background-color 0.2s ease, border-color 0.2s ease; }
  .dm-fakebtn, .dm-toggle-box { transition: background-color 0.2s ease, border-color 0.2s ease; }

  /* The crew, breathing. Only the agents actually working carry a halo, and it
     is the slowest thing on the page: five and a half seconds, one per agent,
     staggered so the group reads as a crew rather than a metronome. */
  .dm-step.is-on .dm-mate[data-working] .halo {
    transform-box: fill-box;
    transform-origin: center;
    animation: dmHalo 5.5s ease-out infinite;
  }
  .dm-step.is-on .dm-mate-build[data-working] .halo { animation-delay: 1.1s; }
  .dm-step.is-on .dm-mate-review[data-working] .halo { animation-delay: 2.2s; }

  @keyframes dmHalo {
    0% { opacity: 0.5; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(1.3); }
  }

  .dm-status, .dm-rail li, .dm-rail-dot { transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }
  .dm-seg { transition: border-color 0.3s ease, color 0.2s ease; }
  .dm-chip { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }

  /* The approval. One tick, drawn once, and then it is over: the disc settles
     and the mark writes itself. No confetti, nothing repeating. */
  .dm-step.is-on .dm-tick-disc { animation: dmDisc 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; transform-box: fill-box; transform-origin: center; }
  .dm-step.is-on .dm-tick-mark {
    stroke-dasharray: 44;
    stroke-dashoffset: 44;
    animation: dmMark 0.5s cubic-bezier(0.3, 0.8, 0.4, 1) 0.35s both;
  }

  @keyframes dmDisc {
    from { opacity: 0; transform: scale(0.82); }
    to { opacity: 1; transform: none; }
  }
  @keyframes dmMark {
    to { stroke-dashoffset: 0; }
  }

  /* The send-back beat: the sentence pulses once a second while the builder is
     working, so the wait has a heartbeat instead of a spinner. */
  .dm-back { animation: dmWait 1.4s ease-in-out infinite; }

  @keyframes dmWait {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }
}