/* Keep the human conversation intact as technical steps become receipts. */
#how .story-persistent.past { opacity: 1; }
#how .story-persistent.past .story-detail { display: block; }
#how .story-persistent[data-story="1"] > .story-summary,
#how .story-persistent[data-story="4"] > .story-summary,
#how .story-persistent[data-story="5"] > .story-summary { display: none; }
#how .story-persistent[data-story="1"] .story-detail,
#how .story-persistent[data-story="5"] .story-detail { margin-top: 0; }
#how .access-blocked { display: flex; align-items: center; gap: 6px; color: #ff9696; font: 600 9px/1.4 var(--mono); letter-spacing: .07em; margin-bottom: 3px; }
#how .access-blocked > span { color: #ff6464; font: 700 15px/1 var(--sans); }
#how .refusal-word { color: var(--accent); font-style: normal; font-weight: 600; }
#how .approval-complete { display: none; }
#how .story-layer.past .approval-pending { display: none; }
#how .story-layer.past .approval-complete { display: inline; }
@media (min-width: 841px) and (prefers-reduced-motion: no-preference) {
  .story-enhanced #how .email-story { min-height: 0; }
  .story-enhanced #how .demo-window-bar { padding: 11px 14px; }
  .story-enhanced #how .story-layers { padding: 10px; }
  .story-enhanced #how .story-layer { padding: 9px 10px; }
  .story-enhanced #how .story-layer + .story-layer { margin-top: 6px; }
  .story-enhanced #how .story-layer.past:not(.story-persistent) { padding: 5px 10px; }
  .story-enhanced #how .story-summary { font-size: 10px; line-height: 1.4; }
  .story-enhanced #how .story-detail { margin-top: 7px; }
  .story-enhanced #how .story-persistent[data-story="1"] .story-detail,
  .story-enhanced #how .story-persistent[data-story="5"] .story-detail { margin-top: 0; }
  .story-enhanced #how .demo-message { grid-template-columns: 24px minmax(0,1fr); gap: 8px; font-size: 12px; line-height: 1.4; }
  .story-enhanced #how .demo-avatar { width: 24px; height: 24px; border-radius: 6px; font-size: 9px; }
  .story-enhanced #how .demo-message b { font-size: 11px; margin-bottom: 2px; }
  .story-enhanced #how .demo-message + .demo-message { margin-top: 8px; }
  .story-enhanced #how .demo-approval { padding: 8px 10px; margin-top: 8px; }
  .story-enhanced #how .demo-approval b, .story-enhanced #how .demo-result > b { font-size: 12px; }
  .story-enhanced #how .demo-approval p, .story-enhanced #how .demo-result > p { margin: 4px 0; font-size: 11px; }
  .story-enhanced #how .demo-decisions { margin-top: 6px; }
  .story-enhanced #how .demo-decisions span { padding: 3px 8px; font-size: 10px; }
  .story-enhanced #how .demo-approval small { margin-top: 5px; font-size: 10px; }
  .story-enhanced #how .result-record { margin-top: 7px; gap: 5px 12px; }
  .story-enhanced #how .result-record dt { font-size: 9px; }
  .story-enhanced #how .result-record dd { font-size: 10px; }
  .story-enhanced #how .story-footer { padding: 8px 14px; font-size: 9px; }
  .story-enhanced #how .permission-checks { gap: 8px; }
}
@media (min-width: 841px) and (prefers-reduced-motion: no-preference) {
  .story-enhanced #how .result-record { grid-template-columns: repeat(3, minmax(0, 1fr)); line-height: 1.3; }
  .story-enhanced #how .result-record div { padding-top: 4px; }
  .story-enhanced #how .result-record dd { margin-top: 2px; }
  .story-enhanced #how .result-record .record-context { display: flex; align-items: baseline; gap: 8px; }
  .story-enhanced #how .demo-result > p { line-height: 1.35; }
  .story-enhanced #how .demo-approval p { line-height: 1.35; }
}
@media (min-width: 841px) and (prefers-reduced-motion: no-preference) {
  .story-enhanced #how .demo-approval,
  .story-enhanced #how .demo-result { line-height: 1.35; font-size: 12px; }
  .story-enhanced #how .demo-approval small { line-height: 1.35; }
  .story-enhanced #how .result-record dt,
  .story-enhanced #how .result-record dd { line-height: 1.3; }
  .story-enhanced #how .story-layer { padding-block: 7px; }
  .story-enhanced #how .story-layer.past:not(.story-persistent) { padding-block: 3px; }
  .story-enhanced #how .story-layer + .story-layer { margin-top: 4px; }
}
#how .refusal-word { font-family: var(--sans); letter-spacing: normal; }
@media (min-width: 841px) and (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .story-enhanced #how .story-layer { padding-block: 5px; }
  .story-enhanced #how .story-layer + .story-layer { margin-top: 3px; }
  .story-enhanced #how .demo-approval { padding-block: 6px; }
  .story-enhanced #how .story-layers { padding-block: 7px; }
  .story-enhanced #how .story-footer { padding-block: 6px; }
}

/* Keep the single main transcript available to assistive technology while the
   visual scroll story compacts completed steps and reserves future steps. */
#how .story-layer.future,
#how .story-layer.past:not(.story-persistent) .story-detail {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}