:root{
  --layout_side_padding : 41px;
  --font_size_body      : 17px;
  --diagram_font_size   : 13px;
  --diagram_heading_h2  : 26px;
  --diagram_heading_h3  : 20px;

  /* iPhone-ish bubble colors */
  --bubble_incoming_bg : #e9e9eb;
  --bubble_outgoing_bg : #34c759; /* iOS Messages green */
  --bubble_shadow      : 0 1px 2px rgba(0,0,0,.10);

  /* sizing */
  --bubble_max_width  : 24rem;
  --bubble_text_pad_x : 12px;

  /* layout helpers (used to align phone + call transcript boxes) */
  --scenario_indent   : 14px;
  --phone_pad         : 14px;
  --phone_box_width   : calc(var(--bubble_max_width) * 1.2);
  /* Left edge of StoryCall bubble column inside a phone box (includes padding). */
  --storycall_col_x   : calc(var(--phone_box_width) - var(--bubble_max_width) - var(--phone_pad));
  /* How far the call transcript box is shifted right (relative to scenario indent). */
  --call_block_shift_x : calc(var(--storycall_col_x) - var(--phone_pad));
  /* Indent for StoryCall column + telephone blocks (keep shared left edge across “SC said to kid” and “SC said to grandma”). */
  --storycall_column_shift : calc(2 * var(--call_block_shift_x));
  /* Additional horizontal offset for telephone-call blocks (StoryCall ↔ Grandma) */
  --call_column_extra_shift : 1.5in;

  /* call block geometry (used to align “StoryCall (call)” and “Grandma” headers) */
  --call_block_left_x       : calc(var(--storycall_column_shift) + var(--call_column_extra_shift));
  --call_block_width        : var(--phone_box_width);
  --call_lane_width         : calc(var(--call_block_left_x) + var(--call_block_width));

  /* outside marker column anchor (IDs like 2.A.1) */
  --marker_offset_x         : calc(var(--marker_col_width) + var(--marker_col_gap) + var(--phone_pad));

  /* outside marker column (IDs like 2.A.1) */
  --marker_col_width  : 64px;
  --marker_col_gap    : 10px;

  /* timestamp column sizing */
  --time_col_width    : 72px;
  --time_col_gap      : 8px;

  /* role header colors */
  --role_kid_color     : var(--bubble_outgoing_bg);
  --role_grandma_color : #c86f00;

  /* Anchor offset for this page (so titles land right under the sticky header). */
  --scenario_anchor_offset : var(--scroll_padding_top);
}

/* For this page, use scroll-margin on the actual headings (more precise than container padding). */
html{
  scroll-padding-top : 0;
  scroll-behavior    : auto;
}
html, body{
  overflow-x         : hidden;
}

.nav_anchor_target{
  /* Ensure snap targets land just below the sticky header. */
  scroll-margin-top  : var(--scenario_anchor_offset);
}

.page_title{
  margin            : 0 0 var(--space_small);
  letter-spacing    : var(--letter_spacing_h2);
}

.page_intro{
  margin            : 0 0 var(--space_large);
  color             : var(--color_text_muted);
}

.jump{
  margin            : 0 0 var(--space_large);
  padding           : var(--space_small) var(--space_medium);
  border-radius     : var(--radius_medium);
  border            : var(--border_default);
  background        : rgba(var(--color_rgb_white),var(--opacity_heavy));
}
.jump_row{
  display           : flex;
  align-items       : baseline;
  justify-content   : space-between;
  gap               : var(--space_medium);
  flex-wrap         : wrap;
}
.jump_title{
  margin            : 0;
  font-weight       : var(--font_weight_heavy);
}
.legend{
  margin            : 0;
  color             : var(--color_text_muted);
  font-size         : .92em;
}
.scenario_list{
  margin            : var(--space_small) 0 0;
  padding-left      : 1.35em;
}
.scenario_list ol{
  margin            : var(--space_small) 0 0;
  padding-left      : 1.35em;
}
.scenario_list li{
  margin            : 4px 0;
}
.scenario_list a{
  text-decoration   : none;
}
.scenario_list a:hover{
  text-decoration   : underline;
}

.group{
  margin            : 0 0 var(--space_large);
}
.group:last-child{
  margin-bottom     : 0;
}
.group + .group{
  padding-top       : var(--space_small);
}
.group_title{
  margin            : 0 0 var(--space_small);
  letter-spacing    : var(--letter_spacing_h2);
  font-size         : var(--diagram_heading_h2);
}

.group_title[id]{
  scroll-margin-top : calc(var(--scenario_anchor_offset) + 6px);
}
.group_note{
  margin            : 0 0 var(--space_small);
  color             : var(--color_text_muted);
}

.scenario{
  margin            : 0 0 var(--space_large);
}
.scenario:last-child{
  margin-bottom     : 0;
}
.scenario h2{
  margin            : 0 0 var(--space_small);
  letter-spacing    : var(--letter_spacing_h3);
}

.scenario h3{
  margin            : 0 0 var(--space_small);
  letter-spacing    : var(--letter_spacing_h3);
  font-size         : var(--diagram_heading_h3);
}
.scenario h3.scenario_title_row{
  display           : flex;
  align-items       : baseline;
  gap               : 10px;
}
.scenario_title_nav{
  margin-left       : auto;
  display           : inline-flex;
  align-items       : center;
  gap               : 10px;
}
.scenario_title_nav a{
  text-decoration   : none;
  font-weight       : var(--font_weight_heavy);
  color             : rgba(var(--color_rgb_black),.55);
  opacity           : .70;
  /* Bigger tap target */
  padding           : 6px 8px;
  border-radius     : 10px;
}
.scenario_title_nav a:hover{
  text-decoration   : none;
  opacity           : .90;
  background        : rgba(0,0,0,.05);
}
.scenario_next_spacer{
  display           : inline-block;
  width             : 28px;
  height            : 1px;
}
.scenario h3[id]{
  scroll-margin-top : calc(var(--scenario_anchor_offset) + 6px);
}

.role_row{
  position          : relative;
  height            : 18px;
  margin            : 0 0 var(--space_small);
  margin-left       : var(--scenario_indent);
  width             : var(--phone_box_width);
  overflow          : visible;
  color             : var(--color_text_muted);
  font-size         : var(--diagram_font_size);
  letter-spacing    : .2px;
}
.role_row.has_call{
  /* Right edge matches the right edge of the call block (so Expression column lines up). */
  width             : calc(var(--phone_box_width) + var(--storycall_column_shift) + var(--call_column_extra_shift));
}
.role_row span{
  position          : absolute;
  top               : 0;
  white-space       : nowrap;
}
.role_row .role_kid{
  left              : calc(var(--phone_pad) + var(--bubble_text_pad_x));
  color             : var(--role_kid_color);
}
.role_row .role_storycall{
  left              : calc(var(--phone_pad) + var(--storycall_column_shift) + var(--bubble_text_pad_x));
}
.role_row .role_storycall_call{
  display           : none;
}
.role_row.has_call .role_storycall_call{
  display           : inline;
  left              : calc(var(--call_block_left_x) + var(--phone_pad) + var(--bubble_text_pad_x));
}
.role_row .role_grandma{
  right             : 0;
  padding-right     : calc(var(--phone_pad) + var(--bubble_text_pad_x));
  text-align        : right;
  color             : var(--role_grandma_color);
}
.role_row .role_expression{
  right             : calc(-1 * var(--marker_offset_x));
  width             : var(--marker_col_width);
  text-align        : right;
  color             : rgba(0,0,0,.55);
  opacity           : .65;
}
.role_row.has_call .role_grandma{
  /* Align Grandma label to the LEFT edge of the orange Grandma call bubbles. */
  right             : auto;
  padding-right     : 0;
  text-align        : left;
  left              : calc(var(--call_block_left_x) + var(--call_block_width) - var(--phone_pad) - var(--bubble_max_width) + var(--bubble_text_pad_x));
}

.back_to_outline{
  display           : inline-block;
  margin-left       : 8px;
  text-decoration   : none;
  font-weight       : var(--font_weight_heavy);
  color             : rgba(var(--color_rgb_black),.55);
  opacity           : .65;
}
.back_to_outline:hover{
  text-decoration   : underline;
  opacity           : .85;
}
.scenario .note{
  margin-top        : 0;
}

@media (pointer: coarse){
  :root{
    --scenario_anchor_offset : var(--scroll_padding_top_mobile);
  }
}

/* Mobile-only typography + page gutters (do not affect desktop). */
@media (pointer: coarse) and (max-width: 900px){
  :root{
    /* Reduce side gutters so content matches the “near edge-to-edge” mobile look. */
    --layout_side_padding : 14px;

    /* Slightly smaller overall typography to match the reference screenshot. */
    --font_size_body      : 16px;
    --diagram_font_size   : 12px;
    --diagram_heading_h2  : 22px;
    --diagram_heading_h3  : 18px;
  }

  /* Tighten diagram padding + slightly reduce internal type sizes on mobile. */
  .grid7_diagram{
    --grid7_padding : 10px;
    --grid7_inset_base : 8px;
    --grid7_inset      : var(--grid7_inset_base);
    --grid7_id_font_size : 13px;
  }
  .grid7_cell{ font-size: 13px; }
  .grid7_diagram .grid7_audio_transcript{ font-size: 13px; }
  .grid7_diagram .grid7_audio_duration{ font-size: 12px; }
}

.thread{
  max-width         : var(--phone_box_width);
  margin            : 0;
  display           : flex;
  flex-direction    : column;
  gap               : 10px;
  padding           : var(--phone_pad);
  border-radius     : var(--radius_medium);
  border            : var(--border_default);
  background        : rgba(var(--color_rgb_white),var(--opacity_heavy));
  font-size         : var(--diagram_font_size);
  position          : relative;
  overflow          : visible;
}

/* Left-align “phone” mockups, with a slight indent from the scenario text. */
.scenario .thread{
  margin-left       : var(--scenario_indent);
}

/* Optional combined phone stack (one continuous “mobile” box behind call overlays). */
.phone_stack{
  max-width         : var(--phone_box_width);
  margin-left       : var(--scenario_indent);
  padding           : var(--phone_pad);
  border-radius     : var(--radius_medium);
  border            : var(--border_default);
  background        : rgba(var(--color_rgb_white),var(--opacity_heavy));
  display           : flex;
  flex-direction    : column;
  gap               : var(--space_small);
  position          : relative;
  overflow          : visible;
}
/* Inside the stack, threads should not draw their own boxes. */
.phone_stack .thread{
  max-width         : 100%;
  margin-left       : 0;
  padding           : 0;
  border            : none;
  background        : transparent;
  border-radius     : 0;
}
.phone_stack.has_call .thread{
  /* Match the call-lane width so Expression markers align under the header column. */
  width             : var(--call_lane_width);
}
.phone_stack.has_call .msg_row{
  width             : var(--call_lane_width);
}
/* Inside the stack, call overlays should sit on top of the white background. */
.phone_stack .call_block{
  position          : relative;
  z-index           : 2;
  margin-left       : calc(var(--storycall_column_shift) - var(--phone_pad) + var(--call_column_extra_shift));
  margin-right      : calc(-1 * (var(--storycall_column_shift) + var(--call_column_extra_shift)));
  width             : var(--call_block_width);
  max-width         : var(--call_block_width);
  margin-top        : 0;
  margin-bottom     : 0;
}

.msg_row{
  position          : relative;
  display           : flex;
  align-items       : flex-start;
  width             : 100%;
}
.msg_row.kid,
.msg_row.user{
  justify-content   : flex-start;
}
.msg_row.storycall{
  justify-content   : flex-start;
}
.msg_row::after{
  content           : attr(data-msg-id);
  position          : absolute;
  top               : 0;
  right             : calc(-1 * var(--marker_offset_x));
  width             : var(--marker_col_width);
  text-align        : right;
  font-size         : 11px;
  letter-spacing    : .7px;
  color             : rgba(0,0,0,.55);
  opacity           : .55;
  pointer-events    : none;
  user-select       : none;
  white-space       : nowrap;
}
.msg_row:not([data-msg-id])::after{
  content           : "";
}

/* Per-message timestamp (in-screen): left of Kid bubbles, right of StoryCall bubbles. */
.msg_row::before{
  content           : attr(data-time);
  display           : block;
  font-size         : 11px;
  letter-spacing    : .7px;
  color             : rgba(0,0,0,.55);
  opacity           : .55;
  user-select       : none;
  white-space       : nowrap;
  line-height       : 1.1;
  padding-top       : 2px;
  width             : var(--time_col_width);
  flex              : 0 0 var(--time_col_width);
}
.msg_row:not([data-time])::before{
  content           : "";
  display           : none;
}
.msg_row.kid::before,
.msg_row.user::before{
  order             : 2;
  margin-left       : var(--time_col_gap);
  text-align        : right;
}
.msg_row.storycall::before{
  order             : 0;
  margin-left       : calc(var(--storycall_column_shift) - (var(--time_col_width) + var(--time_col_gap)));
  margin-right      : var(--time_col_gap);
  text-align        : left;
}
.msg_row > .msg{
  order             : 1;
}

.msg{
  width             : var(--bubble_max_width);
  max-width         : calc(100% - (var(--time_col_width) + var(--time_col_gap)));
  border-radius     : 22px;
  border            : none;
  box-shadow        : var(--bubble_shadow);
  padding           : 10px 12px;
  position          : relative;
}
.msg.kid,
.msg.user{
  background        : var(--bubble_outgoing_bg);
  color             : rgba(var(--color_rgb_white),var(--opacity_heavy));
  --audio_fg         : rgba(var(--color_rgb_white),.92);
  --audio_track      : rgba(var(--color_rgb_white),.22);
}
.msg.storycall{
  background        : var(--bubble_incoming_bg);
  color             : rgba(var(--color_rgb_black),var(--opacity_heavy));
  --audio_fg         : rgba(var(--color_rgb_black),.60);
  --audio_track      : rgba(var(--color_rgb_black),.12);
  /* Lock StoryCall bubbles to a single column (align left edge across scenarios). */
  margin-left       : 0;
  /* StoryCall SMS bubbles should size to content (but never exceed our max bubble width). */
  width             : auto;
  max-width         : var(--bubble_max_width);
}
.msg.storycall.sc_fixed{
  width             : var(--bubble_max_width);
  min-width         : var(--bubble_max_width);
  max-width         : var(--bubble_max_width);
}

.msg_header{
  display           : flex;
  align-items       : baseline;
  justify-content   : space-between;
  gap               : var(--space_small);
  margin            : 0 0 6px;
  color             : rgba(var(--color_rgb_black),var(--opacity_medium));
  font-size         : .78em;
}
.msg.user .msg_header{
  color             : rgba(var(--color_rgb_white),.92);
}

.badge_row{
  display           : inline-flex;
  gap               : var(--space_micro);
  flex-wrap         : wrap;
  justify-content   : flex-end;
}
.badge{
  display           : inline-block;
  padding           : 2px 7px;
  border-radius     : var(--radius_pill);
  border            : 1px solid rgba(var(--color_rgb_black),.10);
  background        : rgba(var(--color_rgb_white),.55);
  font-size         : var(--diagram_font_size);
  letter-spacing    : .35px;
  text-transform    : uppercase;
  white-space       : nowrap;
}
.msg.user .badge{
  border-color      : rgba(var(--color_rgb_white),.22);
  background        : rgba(var(--color_rgb_white),.16);
  color             : rgba(var(--color_rgb_white),.95);
}
.badge.audio{
  background        : rgba(52,199,89,.18);
  border-color      : rgba(52,199,89,.22);
}
.badge.text{
  background        : rgba(43,86,179,.14);
  border-color      : rgba(43,86,179,.20);
}
.badge.transcript{
  background        : rgba(var(--color_rgb_black),.05);
  border-color      : rgba(var(--color_rgb_black),.10);
}

.msg p{
  margin            : 0;
}

/* iOS-like audio message bubble UI */
.audio_msg{
  display           : flex;
  align-items       : center;
  gap               : 10px;
  margin-top        : 2px;
}
.audio_play{
  width             : 28px;
  height            : 28px;
  border-radius     : 999px;
  border            : 2px solid var(--audio_fg);
  display           : inline-flex;
  align-items       : center;
  justify-content   : center;
  font-size         : 13px;
  line-height       : 1;
  color             : var(--audio_fg);
  flex              : 0 0 auto;
}
.audio_wave{
  height            : 16px;
  flex              : 0 0 50%;
  max-width         : 50%;
  border-radius     : 999px;
  background        :
    repeating-linear-gradient(
      90deg,
      var(--audio_fg) 0 2px,
      transparent 2px 5px
    );
  opacity           : .65;
  position          : relative;
}
.msg.user .audio_wave{
  /* Make Kid audio look more like iOS “voice message” bars (more legible in green). */
  background        :
    repeating-linear-gradient(
      90deg,
      var(--audio_fg) 0 3px,
      transparent 3px 7px
    );
  opacity           : .88;
}
.msg.storycall .audio_wave{
  opacity           : .60;
}
.audio_wave::after{
  content           : "";
  position          : absolute;
  inset             : 0;
  border-radius     : 999px;
  background        : var(--audio_track);
  opacity           : .45;
  mix-blend-mode    : overlay;
  pointer-events    : none;
}
.audio_time{
  font-size         : var(--diagram_font_size);
  color             : var(--audio_fg);
  opacity           : .86;
  flex              : 0 0 auto;
  white-space       : nowrap;
}
.audio_transcript{
  margin-top        : 8px;
  font-size         : var(--diagram_font_size);
  line-height       : 1.35;
  white-space       : pre-wrap;
  color             : inherit;
  opacity           : .92;
}
.msg.storycall .audio_transcript{
  opacity           : .78;
}

/* Hide sender headers to mimic iOS 1:1 threads (we keep IDs for reference). */
.msg_header{
  display           : none;
}

.mistake{
  align-self        : center;
  max-width         : 54rem;
  width             : 100%;
  padding           : 10px 12px;
  border-radius     : var(--radius_medium);
  border            : none;
  background        : #ffd6d3;
  color             : rgba(var(--color_rgb_black),var(--opacity_medium));
  font-size         : .92em;
}

/* When used inside the grid7 diagrams, treat it like a full-width grid block inset. */
.grid7_diagram .mistake{
  box-sizing        : border-box;
  max-width         : none;
  width             : auto;
  align-self        : start;
  justify-self      : stretch;
  margin-inline     : var(--grid7_inset);
  /* Match the SMS bubble block edges exactly (no hidden overflow). */
  overflow          : hidden;
}
.mistake_title{
  display           : inline-block;
  padding           : 2px 8px;
  border-radius     : var(--radius_pill);
  border            : none;
  background        : #ffbdb8;
  color             : rgb(185, 31, 24);
  font-size         : .78em;
  letter-spacing    : .35px;
  text-transform    : uppercase;
  margin-right      : 8px;
  white-space       : nowrap;
}

/* Telephone exchange (StoryCall ↔ Grandma) — not a messaging UI */
.call_block{
  margin-top        : var(--space_small);
  margin-bottom     : var(--space_small);
}
.call_block{
  position          : relative;
  width             : var(--call_block_width);
  max-width         : var(--call_block_width);
  margin-left       : calc(var(--scenario_indent) + var(--storycall_column_shift) + var(--call_column_extra_shift));
  margin-right      : calc(-1 * (var(--storycall_column_shift) + var(--call_column_extra_shift)));
}
.call_thread{
  width             : 100%;
  max-width         : 100%;
  margin            : 0;
  padding           : var(--phone_pad);
  border-radius     : var(--radius_medium);
  border            : 1px solid rgba(0,0,0,.10);
  background        : #1a1a1a;
  display           : flex;
  flex-direction    : column;
  gap               : 10px;
  font-size         : var(--diagram_font_size);
  position          : relative;
  overflow          : visible;
}
.call_row{
  display           : flex;
  align-items       : flex-start;
  position          : relative;
}
.call_row::before{
  content           : attr(data-time);
  display           : block;
  font-size         : var(--diagram_font_size);
  letter-spacing    : .7px;
  color             : rgba(0,0,0,.55);
  opacity           : .55;
  user-select       : none;
  white-space       : nowrap;
  line-height       : 1.1;
  padding-top       : 2px;
  width             : var(--time_col_width);
  flex              : 0 0 var(--time_col_width);
}
.call_row::after{
  content           : attr(data-msg-id);
  position          : absolute;
  top               : 0;
  right             : calc(-1 * var(--marker_offset_x));
  width             : var(--marker_col_width);
  text-align        : right;
  font-size         : var(--diagram_font_size);
  letter-spacing    : .7px;
  color             : rgba(0,0,0,.55);
  opacity           : .55;
  pointer-events    : none;
  user-select       : none;
  white-space       : nowrap;
}
.call_row:not([data-msg-id])::after{
  content           : "";
}
.call_bubble{
  background        : rgba(var(--color_rgb_white),var(--opacity_heavy));
  border            : 1px solid rgba(0,0,0,.06);
  border-radius     : 18px;
  padding           : 10px 12px;
  width             : var(--bubble_max_width);
  max-width         : calc(100% - (var(--time_col_width) + var(--time_col_gap)));
  box-shadow        : 0 1px 2px rgba(0,0,0,.08);
}
.call_row.storycall .call_bubble{
  background        : var(--bubble_incoming_bg);
  color             : rgba(var(--color_rgb_black),var(--opacity_heavy));
}
.call_row.grandma .call_bubble{
  background        : #ff9500;
  border-color      : rgba(0,0,0,.06);
  color             : rgba(var(--color_rgb_white),var(--opacity_heavy));
}
.call_row.storycall{
  justify-content   : flex-start;
}
.call_row.storycall::before{
  order             : 2;
  margin-left       : 8px;
  text-align        : right;
}
.call_row.storycall .call_bubble{
  order             : 1;
}
.call_row.grandma{
  justify-content   : flex-end;
}
.call_row.grandma::before{
  order             : 0;
  margin-right      : var(--time_col_gap);
  text-align        : left;
}
.call_row.grandma .call_bubble{
  order             : 1;
}
.call_bubble p{
  margin            : 0;
}
.call_bubble p + p{
  margin-top        : var(--space_micro);
}

/* Segmented “one audio component, multiple pieces” blocks */
.seg_group{
  display           : flex;
  flex-direction    : column;
  gap               : 0;
}
.seg_piece{
  border-radius     : 18px;
}
.seg_group .seg_piece + .seg_piece{
  margin-top        : -1px; /* visually merges borders */
}
.seg_group .seg_piece:first-child{
  border-bottom-left-radius : 8px;
  border-bottom-right-radius: 8px;
}
.seg_group .seg_piece:last-child{
  border-top-left-radius : 8px;
  border-top-right-radius: 8px;
}
.seg_mid{
  background        : var(--bubble_outgoing_bg) !important;
  color             : rgba(var(--color_rgb_white),var(--opacity_heavy)) !important;
}

/* Segment styling inside telephone blocks */
.call_seg .call_bubble{
  box-shadow        : none;
}

/* Segment group built out of multiple call rows (so each segment can have its own Expression ID) */
.call_seg_group{
  display           : flex;
  flex-direction    : column;
  gap               : 0;
}
.call_seg_group .call_row + .call_row{
  margin-top        : -1px; /* merge borders */
}
.call_seg_group .call_row:first-child .call_bubble{
  border-bottom-left-radius : 8px;
  border-bottom-right-radius: 8px;
}
.call_seg_group .call_row:last-child .call_bubble{
  border-top-left-radius : 8px;
  border-top-right-radius: 8px;
}
.call_seg_group .call_row:not(:first-child):not(:last-child) .call_bubble{
  border-radius     : 0;
}

/* Segment styling inside StoryCall audio transcripts (mobile) */
.audio_seg{
  margin-top        : 8px;
}
.audio_seg .seg_piece{
  padding           : 8px 10px;
  border            : 1px solid rgba(0,0,0,.06);
  background        : var(--bubble_incoming_bg);
  color             : rgba(var(--color_rgb_black),var(--opacity_heavy));
  font-size         : .92em;
  line-height       : 1.35;
  white-space       : pre-wrap;
}

/* ============================================================
   2.B2 — seven-column grid diagram (new component)
   ============================================================ */
.grid7_diagram{
  /* ID column removed: keep the first grid track but collapse it to 0 so we don't have
     to renumber every diagram's inline grid-column placements. */
  --grid7_col_id        : 0px;
  --grid7_col           : 128px;
  /* Slightly taller rows so phone rows 2.B2.3–2.B2.5 comfortably fit their 3 lines. */
  --grid7_row_h         : 66px;
  --grid7_padding       : 14px;
  --grid7_inset_base    : 10px;
  --grid7_inset         : var(--grid7_inset_base);
  --grid7_row_gap       : 14px;
  --grid7_guide_opacity : .10; /* set to 0 to hide; bump up to ~0.18 for clearer guides */

  /* ID typography (used for ID labels + in-block channel titles). */
  --grid7_id_font_size  : 14px;
  --grid7_id_color      : rgba(0,0,0,.45);
  --grid7_phone_id_color: rgba(255,255,255,.38);
  --grid7_sms_label_row_h   : 18px;
  --grid7_phone_label_pad   : 16px;

  /* Reference-image palette (pastel fills; outlines intentionally transparent) */
  --grid7_kid_bg        : #97c47a;
  --grid7_storycall_bg  : #a9c7f7;
  --grid7_grandma_bg    : #f6cc9c;
  --grid7_call_bg       : #5f5f5f;

  position          : relative;
  padding           : var(--grid7_padding);
  border-radius     : 18px;
  border            : 1px solid rgba(0,0,0,.10);
  background        : #e9e9e9; /* light gray “diagram background” */
  overflow          : hidden;

  display           : grid;
  /* Fit-to-container (prevents horizontal scrolling) while preserving 7 distinct columns. */
  grid-template-columns : var(--grid7_col_id) repeat(6, minmax(0, 1fr));
  /* Auto-size every row to content so each bubble fits its text tightly. */
  grid-auto-rows    : max-content;
  column-gap        : 0;
  row-gap           : var(--grid7_row_gap);

  /* Flip the visual order of the 6 visible columns (kid…grandma) without rewriting all inline grid placements. */
  transform         : scaleX(-1);
  transform-origin  : center;
}

.grid7_diagram > *:not(.grid7_guides){
  position          : relative;
  z-index           : 1;
  /* Undo the mirror for the contents so text/icons are readable, while the layout stays flipped. */
  transform         : scaleX(-1);
}
.grid7_guides{
  position          : absolute;
  inset             : var(--grid7_padding);
  z-index           : 0;
  pointer-events    : none;

  display           : grid;
  grid-template-columns : var(--grid7_col_id) repeat(6, minmax(0, 1fr));
  opacity           : var(--grid7_guide_opacity);
}
.grid7_guide{
  height            : 100%;
  border-right      : 1px dashed rgba(0,0,0,.45);
}
.grid7_guide:first-child{
  /* Avoid an “extra” dashed line at the far left now that the ID column is collapsed. */
  border-right      : none;
}
.grid7_guide:last-child{
  border-right      : none;
}

.grid7_mobile_canvas{
  grid-column       : 2 / 6;   /* columns 2–5 */
  /* Stop the canvas right after the last mobile row (removes the big blank gap after 2.B2.7). */
  grid-row          : 2 / 9;
  background        : rgba(var(--color_rgb_white),var(--opacity_heavy));
  border            : 1px solid rgba(0,0,0,.10);
  border-radius     : 16px;
  z-index           : 0;
}
.grid7_phone_canvas_bg{
  grid-column       : 4 / 8;   /* columns 4–7 */
  grid-row          : 4 / 8;
  background        : var(--grid7_call_bg);
  border-radius     : 18px;
  z-index           : 0;
}
.grid7_phone_canvas_bg{
  /* Legacy (we now render the phone bg as .grid7_phone_bg inside 2.B2). */
  display           : none;
}

.grid7_cell{
  font-size         : 14px;
  color             : rgba(0,0,0,.75);
  align-self        : start;
}
.grid7_head{
  grid-row          : 1;
  font-size         : 13px;
  letter-spacing    : .35px;
  color             : rgba(0,0,0,.70);
  padding           : 0 6px 6px;
  border-bottom     : 1px dashed rgba(0,0,0,.18);
  /* Titles are now icon-only. Keep the row height, hide the text. */
  font-size         : 0;
  color             : transparent;
  position          : relative;
  min-height        : calc((var(--face_size, 10rem) * .25) + 8px);
}
.grid7_head_id{
  /* Keep in layout for diagrams that rely on auto-placement (but make it invisible). */
  visibility        : hidden;
}
.grid7_id{
  display           : none; /* ID column removed (IDs move into timestamps via JS) */
}
.grid7_pos_id_1{ grid-row: 2; }
.grid7_pos_id_2{ grid-row: 3; }
.grid7_pos_id_3a{ grid-row: 4; }
.grid7_pos_id_3b{ grid-row: 5; }
.grid7_pos_id_3c{ grid-row: 6; }
.grid7_pos_id_3d{ grid-row: 7; }
.grid7_pos_id_4{ grid-row: 8; }

.grid7_timestamp{
  font-size         : var(--grid7_id_font_size);
  color             : var(--grid7_id_color);
  /* Remove timestamp outline (no border box). */
  border            : none;
  background        : transparent;
  border-radius     : 0;
  padding           : 0;
  display           : inline-block;
  align-self        : center;
  justify-self      : start;
  margin-inline     : var(--grid7_inset);
}
.grid7_timestamp:not([data-id]){
  /* Timestamp is no longer shown; only render this element when it carries an ID. */
  display           : none;
}
.grid7_timestamp[data-id]::before{
  content           : attr(data-id);
  font-weight       : 700;
  letter-spacing    : .2px;
}

/* Generic in-canvas notice row (e.g. "1 hour later"). */
.grid7_notice{
  grid-column       : 2 / 6; /* SMS canvas span */
  background        : rgba(0,0,0,.08);
  color             : rgba(0,0,0,.55);
  font-size         : var(--grid7_id_font_size);
  font-weight       : 700;
  letter-spacing    : .3px;
  border-radius     : 12px;
  padding           : 8px 10px;
  text-align        : center;
  align-self        : center;
  margin-inline     : var(--grid7_inset);
}

/* 2.B-specific placement for the "1 hour later" notice. */
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_notice_1h{
  grid-column       : 2 / 6;
  grid-row          : 8;
}

/* Phone-block IDs (IDs that live inside the dark phone canvas) should align below the "telephone" title,
   consistently across segments. */
.grid7_timestamp.grid7_phone_id{
  --grid7_inset      : calc(var(--grid7_inset_base) + var(--grid7_phone_label_pad));
  margin-top         : var(--grid7_inset);
  color              : var(--grid7_phone_id_color);
}

/* Label the whole SMS canvas (not each message). */
.grid7_mobile_canvas{
  position          : relative;
}
.grid7_mobile_canvas::before{
  content           : "SMS";
  position          : absolute;
  top               : 8px;
  left              : 10px;
  font-size         : var(--grid7_id_font_size);
  font-weight       : 700;
  letter-spacing    : .2px;
  color             : var(--grid7_id_color);
  opacity           : .9;
  pointer-events    : none;
}

.grid7_phone_bg,
.grid7_phone_block{
  /* Ensure phone header label can sit above the dark background but below phone message bubbles. */
  z-index           : 1;
  position          : relative;
  color             : var(--grid7_phone_id_color);
}
.grid7_phone_bg::before,
.grid7_phone_block::before{
  content           : "telephone";
  position          : absolute;
  top               : 8px;
  left              : 10px;
  font-size         : var(--grid7_id_font_size);
  font-weight       : 700;
  letter-spacing    : .2px;
  color             : currentColor;
  opacity           : .95;
  pointer-events    : none;
}
.grid7_phone_msg{
  z-index           : 2;
  /* Increase the top inset used by inline margin-top: var(--grid7_inset) on phone segments,
     without shifting the whole grid item (which breaks layout). */
  --grid7_inset      : calc(var(--grid7_inset_base) + var(--grid7_phone_label_pad));
}
.grid7_phone_msg p{
  margin            : 0;
}
.grid7_phone_msg p + p{
  margin-top        : var(--space_micro);
}

/* Column header avatars (reuse homepage crop/zoom vars from index.css; 25% of the homepage circle size). */
.grid7_head.grid7_head_avatar::after{
  content            : "";
  display            : block;
  width              : calc(var(--face_size, 10rem) * .25);
  height             : calc(var(--face_size, 10rem) * .25);
  border-radius      : 50%;
  background-color   : rgba(var(--color_rgb_white),1);
  background-repeat  : no-repeat;
  box-shadow         : 0 2px 6px rgba(0,0,0,.10);
  /* Center within the header cell */
  margin             : 0 auto;
}
.grid7_head.grid7_head_kid::after{
  background-image   : url("images/kid.png");
  background-position: 50% var(--face_position_y, 45%);
  background-size    : var(--face_zoom, 175%);
}
.grid7_head.grid7_head_grandma::after{
  background-image   : url("images/granny.png");
  background-position: 50% var(--face_granny_position_y, 35%);
  background-size    : var(--face_granny_zoom, 190%);
}

.grid7_block,
.grid7_sms_block{
  border            : 1px solid transparent;
  border-radius     : 14px;
  padding           : 14px 16px;
  line-height       : 1.18;
  color             : rgba(0,0,0,.88);
  align-self        : stretch;
  margin-inline     : var(--grid7_inset);
}
/* Participant color should apply to message blocks (not containers). */
.grid7_block.participant_kid,
.grid7_sms_block.participant_kid{ background: var(--grid7_kid_bg); }
.grid7_block.participant_storycall,
.grid7_sms_block.participant_storycall{ background: var(--grid7_storycall_bg); }
.grid7_block.participant_grandma,
.grid7_sms_block.participant_grandma{ background: var(--grid7_grandma_bg); }

/* Audio UI inside grid blocks (reuse the same “audio file” widget as the phone mockups). */
.grid7_diagram .grid7_block,
.grid7_diagram .grid7_sms_block{
  --audio_fg     : rgba(0,0,0,.60);
  --audio_track  : rgba(0,0,0,.14);
}
.grid7_diagram .grid7_block.participant_kid,
.grid7_diagram .grid7_sms_block.participant_kid{
  --audio_fg     : rgba(var(--color_rgb_white),.92);
  --audio_track  : rgba(var(--color_rgb_white),.22);
  color          : rgba(var(--color_rgb_white),var(--opacity_heavy));
}
.grid7_diagram .grid7_block.participant_grandma,
.grid7_diagram .grid7_sms_block.participant_grandma{
  --audio_fg     : rgba(0,0,0,.55);
  --audio_track  : rgba(0,0,0,.12);
}
/* New semantic audio UI for the grid diagram (do not reuse the old .audio_* names). */
.grid7_diagram .grid7_audio{
  display         : flex;
  align-items     : center;
  gap             : 10px;
  margin-top      : 2px;
}
.grid7_diagram .grid7_audio_play{
  width           : 28px;
  height          : 28px;
  border-radius   : 999px;
  border          : 2px solid var(--audio_fg);
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  font-size       : 13px;
  line-height     : 1;
  color           : var(--audio_fg);
  flex            : 0 0 auto;
}
.grid7_diagram .grid7_audio_waveform{
  height          : 16px;
  flex            : 0 0 50%;
  max-width       : 50%;
  border-radius   : 999px;
  background      :
    repeating-linear-gradient(
      90deg,
      var(--audio_fg) 0 2px,
      transparent 2px 5px
    );
  opacity         : .65;
}
.grid7_diagram .participant_kid .grid7_audio_waveform{
  background      :
    repeating-linear-gradient(
      90deg,
      var(--audio_fg) 0 3px,
      transparent 3px 6px
    );
  opacity         : .85;
}
.grid7_diagram .grid7_audio_duration{
  font-size       : 13px;
  letter-spacing  : .25px;
  color           : var(--audio_fg);
  opacity         : .92;
  white-space     : nowrap;
}
.grid7_diagram .grid7_audio_transcript{
  margin-top      : 8px;
  font-size       : 14px;
  line-height     : 1.18;
  color           : inherit;
}

/* 2.B2-specific placement overrides (two phone blocks + two StoryCall→Kid messages). */
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_mobile_canvas{
  grid-row         : 2 / 14;
}
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_id_1{ grid-column: 1; grid-row: 2; }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_ts_1{ grid-column: 5; grid-row: 2; align-self: start; justify-self: start; margin-top: var(--grid7_inset); }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_msg_1{ grid-column: 2 / 5; grid-row: 2; margin-top: var(--grid7_inset); }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_msg_1{
  /* Match the dark foreground used in the StoryCall phone prompts (e.g. 2.B2.4). */
  color             : rgba(0,0,0,.88);
  --audio_fg        : rgba(0,0,0,.60);
  --audio_track     : rgba(0,0,0,.14);
}

/* Phone block #1 rows 3–6 */
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_phone1_bg{ grid-column: 4 / 8; grid-row: 3 / 7; }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_phone1_ts_top{ grid-column: 7; grid-row: 3; align-self: start; justify-self: start; margin-top: var(--grid7_inset); color: rgba(255,255,255,.38); }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_phone1_ts_orange{ grid-column: 4; grid-row: 6; align-self: start; justify-self: end; color: rgba(255,255,255,.38); }

.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_id_2{ grid-column: 1; grid-row: 3; }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_phone1_blue1{ grid-column: 4 / 7; grid-row: 3; margin-top: var(--grid7_inset); border-top-left-radius: 14px; border-top-right-radius: 14px; }

.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_id_3{ grid-column: 1; grid-row: 4; }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_phone1_green{ grid-column: 4 / 7; grid-row: 4; margin-top: calc(-1 * var(--grid7_row_gap)); }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_id_3{ margin-top: calc(-1 * var(--grid7_row_gap)); }

.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_id_4{ grid-column: 1; grid-row: 5; margin-top: calc(-1 * var(--grid7_row_gap)); }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_phone1_blue2{ grid-column: 4 / 7; grid-row: 5; margin-top: calc(-1 * var(--grid7_row_gap)); border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }

.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_id_5{ grid-column: 1; grid-row: 6; }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_phone1_orange{ grid-column: 5 / 8; grid-row: 6; border-radius: 14px; margin-bottom: var(--grid7_inset); }

/* 2.B2.6 StoryCall → Kid text (row 7) */
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_id_6{ grid-column: 1; grid-row: 7; }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_ts_6{ grid-column: 2; grid-row: 7; align-self: start; justify-self: end; text-align: right; margin-top: var(--grid7_inset); }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_msg_6{ grid-column: 3 / 6; grid-row: 7; margin-top: var(--grid7_inset); }

/* Phone block #2 (shifted down by 1 row to make room for the "1 hour later" notice at row 8) */
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_phone2_bg{ grid-column: 4 / 8; grid-row: 9 / 13; }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_phone2_ts_top{ grid-column: 7; grid-row: 9; align-self: start; justify-self: start; margin-top: var(--grid7_inset); color: rgba(255,255,255,.38); }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_phone2_ts_orange{ grid-column: 4; grid-row: 12; align-self: start; justify-self: end; text-align: right; color: rgba(255,255,255,.38); }

.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_id_7{ grid-column: 1; grid-row: 9; }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_phone2_blue1{ grid-column: 4 / 7; grid-row: 9; margin-top: var(--grid7_inset); border-top-left-radius: 14px; border-top-right-radius: 14px; }

.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_id_8{ grid-column: 1; grid-row: 10; margin-top: calc(-1 * var(--grid7_row_gap)); }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_phone2_green{ grid-column: 4 / 7; grid-row: 10; margin-top: calc(-1 * var(--grid7_row_gap)); }

.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_id_9{ grid-column: 1; grid-row: 11; margin-top: calc(-1 * var(--grid7_row_gap)); }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_phone2_blue2{ grid-column: 4 / 7; grid-row: 11; margin-top: calc(-1 * var(--grid7_row_gap)); border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }

.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_id_10{ grid-column: 1; grid-row: 12; }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_phone2_orange{ grid-column: 5 / 8; grid-row: 12; border-radius: 14px; margin-bottom: var(--grid7_inset); }

/* 2.B2.11 StoryCall → Kid audio (shifted down by 1 row) */
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_id_11{ grid-column: 1; grid-row: 13; }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_ts_11{ grid-column: 2; grid-row: 13; align-self: start; justify-self: end; text-align: right; margin-top: var(--grid7_inset); }
.grid7_diagram[aria-label="2.B2 seven-column diagram"] .grid7_b2_msg_11{ grid-column: 3 / 6; grid-row: 13; margin-top: var(--grid7_inset); margin-bottom: var(--grid7_inset); }

.grid7_call_block.participant_kid{ background: var(--grid7_kid_bg); }
.grid7_call_block.participant_storycall{ background: var(--grid7_storycall_bg); }
.grid7_call_block.participant_grandma{ background: var(--grid7_grandma_bg); }

/* Participant color mapping inside the phone canvas. */
.grid7_phone_msg.participant_kid{ background: var(--grid7_kid_bg); }
.grid7_phone_msg.participant_storycall{ background: var(--grid7_storycall_bg); }
.grid7_phone_msg.participant_grandma{ background: var(--grid7_grandma_bg); }

/* Placement helpers (scoped to this diagram instance) */
.grid7_span_2_4{ grid-column: 2 / 5; grid-row: 2; }
.grid7_span_2_4{
  /* Show a little white mobile canvas above the first mobile block (like the reference). */
  margin-top        : var(--grid7_inset);
}
.grid7_at_4_2{ grid-column: 5; grid-row: 2; }
.grid7_at_4_2{
  /* Keep this timestamp aligned to the top edge of the first mobile block. */
  align-self        : start;
  margin-top        : var(--grid7_inset);
  /* Kid → StoryCall: keep timestamp close to the bubble on its LEFT edge. */
  justify-self      : start;
  text-align        : left;
  margin-left       : 0;
  margin-right      : var(--grid7_inset);
}
.grid7_at_2_3{ grid-column: 2; grid-row: 3; }
.grid7_at_2_3{
  /* StoryCall → Kid: keep timestamp close to the bubble on its RIGHT edge. */
  align-self        : start;
  justify-self      : end;
  text-align        : right;
  margin-left       : var(--grid7_inset);
  margin-right      : 0;
}
.grid7_span_3_5{ grid-column: 3 / 6; }
.grid7_row_3{ grid-row: 3; }
.grid7_span_4_7{ grid-column: 4 / 8; }
.grid7_rows_4_8{ grid-row: 4 / 9; }
/* Bottom mobile row: pull it up one grid row (removes the “extra blank row” gap above 2.B2.7). */
.grid7_at_2_9{ grid-column: 2; grid-row: 8; }
.grid7_at_2_9{
  /* Grandma → Kid: keep timestamp close to the bubble on its RIGHT edge. */
  align-self        : start;
  justify-self      : end;
  text-align        : right;
  margin-left       : var(--grid7_inset);
  margin-right      : 0;
}
.grid7_row_9{ grid-row: 8; }
.grid7_pos_id_4{ grid-row: 8; }
.grid7_row_9{
  /* Show a little white canvas below the last mobile block (like the reference). */
  margin-bottom     : var(--grid7_inset);
}

/* Phone interaction canvas (columns 4–7). */
/* ---- 2.B2 phone block (outer grid items) ---- */
.grid7_phone_bg,
.grid7_phone_block{
  grid-column       : 4 / 8; /* columns 4–7 */
  grid-row          : 4 / 8; /* rows 4–7 */
  background        : var(--grid7_call_bg);
  border-radius     : 18px;
  z-index           : 0;
}
.grid7_phone_msg{
  border            : 1px solid transparent;
  padding           : 14px 16px;
  line-height       : 1.18;
  color             : rgba(0,0,0,.88);
  border-radius     : 0;
  margin-left       : var(--grid7_inset);
  margin-right      : var(--grid7_inset);
}
.grid7_phone_blue_top{
  grid-column       : 4 / 7; /* cols 4–6 */
  grid-row          : 4;
  margin-top        : var(--grid7_inset); /* inset from the top of the dark phone bg */
  border-top-left-radius : 14px;
  border-top-right-radius: 14px;
}
.grid7_phone_green{
  grid-column       : 4 / 7;
  grid-row          : 5;
  /* Remove the outer row-gap between .3 and .4 so they touch. */
  margin-top        : calc(-1 * var(--grid7_row_gap));
}
.grid7_phone_blue_bottom{
  grid-column       : 4 / 7;
  grid-row          : 6;
  /* Remove the outer row-gap between .4 and .5 so they touch. */
  margin-top        : calc(-1 * var(--grid7_row_gap));
  border-bottom-left-radius  : 14px;
  border-bottom-right-radius : 14px;
}
.grid7_phone_orange{
  grid-column       : 5 / 8; /* cols 5–7 */
  grid-row          : 7;
  border-radius     : 14px;
  /* Gap between .5 and .6 is preserved (normal row-gap). */
  margin-bottom     : var(--grid7_inset); /* show dark bg below .6 */
}

/* Make the top/stack segments feel like one contiguous “audio” block. */
.grid7_phone_row_1.grid7_phone_span_full{
  border-top-left-radius : 14px;
  border-top-right-radius: 14px;
}
.grid7_phone_row_2.grid7_phone_span_full{
  border-radius     : 0;
}
.grid7_phone_row_3.grid7_phone_span_full{
  border-radius     : 0;
}

/* Phone timestamps (placed INSIDE the phone canvas so they align to the phone rows). */
.grid7_phone_ts_top{
  grid-column       : 7; /* timestamp strip */
  grid-row          : 4; /* aligns with .3 (top blue) */
  align-self        : start;
  justify-self      : start;
  text-align        : left;
  color             : rgba(255,255,255,.38);
  margin-inline     : 0;
  margin-top        : var(--grid7_inset);
}
.grid7_phone_ts_grandma{
  grid-column       : 4; /* left of orange bubble */
  grid-row          : 7; /* aligns with .6 */
  align-self        : start; /* align with top edge of the orange bubble */
  justify-self      : end;   /* hug the orange bubble */
  text-align        : right;
  color             : rgba(255,255,255,.38);
  margin-inline     : 0;
}

/* Keep IDs aligned with the “no-gap” phone stack rows. */
.grid7_pos_id_3b{ margin-top: calc(-1 * var(--grid7_row_gap)); }
.grid7_pos_id_3c{ margin-top: calc(-1 * var(--grid7_row_gap)); }