/* activity-map.css — the treasure-map strip inside the activity popups.
   A pencil-dashed trail down the left, painted number blocks pinned on it
   (step-family colors, same coding as the editor's stack), and a drawn
   red X at the end. Totem materials: paper ground comes from the popup. */

.amap {
  position: relative;
  margin: 18px 0 4px;
  padding: 2px 0;
}

/* The trail: a hand-drawn dashed line stop to stop */
.amap-trail {
  position: absolute;
  left: 17px;
  top: 12px;
  bottom: 16px;
  width: 0;
  border-left: 3px dashed rgba(110, 75, 40, 0.45);
  transform: rotate(0.6deg);
}

.amap-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 13px;
}

.amap-row:last-child { margin-bottom: 0; }

/* Departure: a small sanded chip where the trail begins */
.amap-start-chip {
  display: inline-block;
  background: var(--t-sanded, #EFE3CC);
  background-image: var(--t-grain);
  color: var(--t-muted-wood, #6E4B28);
  font-family: var(--t-body, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px 6px;
  transform: rotate(-1deg);
  box-shadow: 0 2px 3px rgba(50, 35, 15, 0.2);
}

/* Trail riders: the hand-offs of student work, pinned on the trail
   between the stops they travel. These labels ARE the pitch (students
   working off each other's ideas), so they get their own little paper
   scraps rather than living inside a stop's box. */
.amap-rider {
  position: relative;
  z-index: 1;
  margin: -5px 0 8px 34px;
}

.amap-rider-note {
  display: inline-block;
  max-width: 100%;
  background: #FFFDF6;
  font-size: 11.5px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.3;
  color: var(--t-muted-wood, #6B4E2A);
  padding: 4px 10px 5px;
  transform: rotate(-1.1deg);
  box-shadow: 0 2px 3px rgba(50, 35, 15, 0.18), 0 0 0 1px rgba(50, 35, 15, 0.08);
}

.amap-rider:nth-of-type(even) .amap-rider-note { transform: rotate(0.9deg); }

/* Painted number blocks pinned on the trail */
.amap-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--t-display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 14px;
  color: var(--t-paper, #FDF9F0);
  box-shadow: 0 2px 3px rgba(50, 35, 15, 0.26);
  transform: rotate(var(--rot, -1deg));
  position: relative;
  z-index: 1; /* sits on the trail */
}

/* Family paint, same meaning as the editor's stack */
.amap-fam-ask { background: var(--t-yellow, #FFC800); background-image: var(--t-grain); color: var(--t-ink, #2A2620); }
.amap-fam-show { background: var(--t-green, #2E9E44); }
.amap-fam-decide { background: var(--t-magenta, #B0197E); }
.amap-fam-team { background: var(--t-orange, #E06D10); }
.amap-fam-ai { background: var(--t-cyan, #1BA9C4); }
.amap-fam-rounds { background: var(--t-walnut, #8A5A2C); background-image: var(--t-grain); }

.amap-body {
  min-width: 0;
  padding-top: 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.amap-name {
  font-family: var(--t-display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-ink, #2A2620);
}

/* Rounds contents / branch note */
.amap-sub {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-muted, #6B6250);
}

/* The step's own words, quoted */
.amap-detail {
  font-size: 12.5px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  color: var(--t-muted, #6B6250);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* X marks the wrap-up: two red strokes crossed at the trail's end */
.amap-endrow { align-items: center; }

.amap-x {
  flex-shrink: 0;
  position: relative;
  width: 30px;
  height: 30px;
  z-index: 1;
}

.amap-x::before,
.amap-x::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 13px;
  width: 23px;
  height: 5px;
  background: var(--t-red, #D9331F);
  box-shadow: 0 1px 2px rgba(50, 35, 15, 0.3);
}

.amap-x::before { transform: rotate(43deg); }
.amap-x::after { transform: rotate(-46deg); }

.amap-end-label {
  font-family: var(--t-display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-muted-caps, #8A7B62);
}

/* "You are here": the live mark the preview map rail pins on the stop
   the room is playing right now. Yellow means NOW everywhere in Totem. */
.amap-row.amap-here .amap-num {
  background: var(--t-yellow, #FFC800);
  color: var(--t-ink, #2A2620);
  box-shadow: 0 0 0 3px var(--t-ink, #2A2620), 0 2px 3px rgba(50, 35, 15, 0.26);
}

.amap-row.amap-here .amap-name { font-weight: 800; }

.amap-startrow.amap-here .amap-start-chip,
.amap-endrow.amap-here .amap-end-label {
  background: var(--t-yellow, #FFC800);
  color: var(--t-ink, #2A2620);
  box-shadow: 0 0 0 3px var(--t-ink, #2A2620), 0 2px 3px rgba(50, 35, 15, 0.26);
}