/* src/modules/demo/demoNarratorCard.css — the long demo's narration: cards, persona label,
   captions.

   The app underneath keeps its own appearance, like every other demo surface here: the story is the
   live app being used, and a demo that restyled what it demonstrates would be showing a different
   product. Only the words wrapped around it are drawn here.

   One card has several kinds: the shared shell and slots come first, then only what each kind adds.
   The paper kind adds a texture. A message adds a tint and a quotation; the invitation shares the
   message kind, keeps its line breaks and lets its long link wrap. The guide adds its own accent.
   The paper kind is a texture, not a drawn form. Everything else on screen is the live app, so a
   drawn form would read as a real screen and send a viewer looking for it. A card that tints itself
   owns its text colours, because the muted tokens sit near the AA contrast bar on the light
   palettes and a tint removes the margin. */

/* Inside the guide's panel, the narration is a SECTION of that card, not a card of its own
   (reported 2026-08-23: two boxes, one unnumbered and one apparently mis-numbered). It keeps only
   its words and its spacing — the border, the shadow and the placement belong to the panel around
   it, which already carries the step number, the exit and the Back button. */
.walkthrough-panel .demo-narrator-card {
  position: static;
  z-index: auto;
  width: auto;
  max-width: none;
  transform: none;
  margin: 0;
  padding: 0 0 0.35rem;
  /* The prose SCROLLS rather than growing the panel. The guide moves its panel out of the way of
     the control a step is about, and it can only do that while there is screen left over — a panel
     grown to half the phone by a long paragraph ends up over the very thing it is pointing at, which
     is how the story first got stuck mid-swap. The text is never shortened for this; it is the box
     that is bounded.
     The bound is the PANEL's (walkthrough.css) and this is the part that gives way to it: as the
     flex child that may shrink, the card takes whatever is left after the step number, the
     instruction and the buttons have their own height. A 32vh cap of its own was a second number
     saying the same thing in different units, and on a short phone the two disagreed — the card
     obeyed its cap while the panel it was in came to 53% of the screen. */
  flex: 1 1 auto;
  min-height: 0;
  /* The last line fades out, which is how a reader knows the paragraph carries on below the fold.
     Always on, and invisible when there is nothing to fade: a card whose words fit ends in its own
     bottom margin, so the gradient falls on blank space. Both spellings, because the phone this is
     designed around is the one that needs the prefixed one. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
}

/* The story's own words sit above the instruction, so the seam between them is a rule rather than
   a gap: a viewer reads the paragraph, then the one line telling them what to do with it. */
.walkthrough-panel .demo-narrator-card::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.6rem;
  background: var(--card-border);
}

/* The narration card when it stands alone — mounted without a guide around it, which is how it is
   tested on its own. Above the clipboard overlay (120/130) and the walkthrough panel (9400), below
   the hand (9999) — the pointer has to read as being over the card it is about to tap. */
.demo-narrator-card {
  position: fixed;
  left: 50%;
  /* ABOVE the middle, because the guide's own panel owns the bottom of the screen and a card
     floating over its buttons is what a reader tries to tap through (reported 2026-08-22). */
  top: 12vh;
  z-index: 9500;
  width: min(30rem, calc(100vw - 2.5rem));
  transform: translateX(-50%);
  padding: 1.25rem 1.35rem 1.1rem;
  border-radius: var(--border-radius-lg);
  background: var(--card-bg);
  color: var(--text-main);
  border: 1px solid var(--card-border);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.35);
  text-align: left;
}

.demo-narrator-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.demo-narrator-title {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  line-height: 1.25;
}

/* Every kind sets its words the same way, whichever element carries them: a message card's body is
   a `blockquote`, because it IS a quotation from another app, and a blockquote arrives with a
   browser indent nobody asked for. */
.demo-narrator-body {
  margin: 0 0 1rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Real touch targets, because the hand taps them and a viewer may too (no-hover rule). Under
   the words, and quieter than the guide's own Next: the story's ending is "keep tapping around",
   and emptying the demo out is the deliberate act. */
.demo-narrator-cleanup {
  min-height: 44px;
  width: 100%;
  justify-content: center;
  margin-top: 0.5rem;
}

/* The PAPER track: what happens off-screen, on a printed form — narrated as text on a
   paper-textured card, never drawn as a form. Everything else in this demo is the live app, so a
   drawn surface among them reads as a real screen and misleads the first viewer who looks for it.
   The texture is what says "this step is not a screen": warm ground, a ruled left margin, no app
   chrome. Generated, so it costs no asset and cannot go missing from a cache. */
.demo-narrator-card--paper {
  background: repeating-linear-gradient(
      transparent 0 1.55rem,
      color-mix(in srgb, #94a3b8 22%, transparent) 1.55rem 1.6rem
    ), linear-gradient(180deg, #fdfaf1 0%, #f6efdf 100%);
  color: #3b3423;
  border-color: color-mix(in srgb, #a8a29e 55%, transparent);
  border-left: 3px solid color-mix(in srgb, #dc2626 45%, transparent);
}

.demo-narrator-card--paper .demo-narrator-kicker,
.demo-narrator-card--paper .demo-narrator-body {
  color: #6b5f45;
}

/* Inside the guide's panel the paper keeps its texture — it is what says "this step happens on
   paper, not on a screen" — but becomes an inset sheet rather than the whole card, since the card
   is now the guide's. */
.walkthrough-panel .demo-narrator-card--paper {
  padding: 0.75rem 0.9rem;
  border-radius: var(--border-radius-md);
  border-left: 3px solid color-mix(in srgb, #dc2626 45%, transparent);
  color: #3b3423;
}

/* The MESSAGE track: a step that happens in a messaging app, not in this one — the link arriving on
   the client's phone, and her file arriving on the trainer's. Drawn as a bubble because that is what
   the viewer is being told to picture, and because it could never be mistaken for a screen of this
   app, which is the whole rule the paper track exists for. */
.demo-narrator-card--message,
.demo-narrator-card--invitation {
  background: color-mix(in srgb, #22c55e 12%, var(--card-bg));
  border-color: color-mix(in srgb, #22c55e 40%, transparent);
  border-left: 3px solid #22c55e;
}

.walkthrough-panel .demo-narrator-card--message,
.walkthrough-panel .demo-narrator-card--invitation {
  padding: 0.75rem 0.9rem;
  border-radius: var(--border-radius-md);
  border-left: 3px solid #22c55e;
}

/* The message itself is somebody's words, so it is set apart from the story's narrating voice. It
   is a real `blockquote` since 2026-08-27 — the italics said "not our words" to a reader
   and nothing at all to a screen reader — which brings a browser indent this puts back. */
.demo-narrator-card--message .demo-narrator-body,
.demo-narrator-card--invitation .demo-narrator-body {
  font-style: italic;
  margin-inline: 0;
}

/* The invitation is the real message, line breaks and full link included: the breaks are kept, and
   the link may break anywhere, since a phone-wide card cannot hold it on one line. */
.demo-narrator-card--invitation .demo-narrator-body {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Full strength on this card, not the muted grey the narrating voice uses. Two reasons, and the
   second is the one that failed a measurement: its body IS the thing being read — the message
   itself, not an aside about it — and the muted grey over this card's green tint measured 4.28:1 on
   Daylight and 4.37:1 on Blossom, under the bar for a paragraph. The muted tokens sit near
   that bar on the light palettes to begin with, so any tinted surface eats the margin; a card that
   tints itself owns its own text colours. */
.demo-narrator-card--message .demo-narrator-body,
.demo-narrator-card--message .demo-narrator-kicker,
.demo-narrator-card--invitation .demo-narrator-body,
.demo-narrator-card--invitation .demo-narrator-kicker,
.demo-narrator-card--screenshot .demo-narrator-body,
.demo-narrator-card--screenshot .demo-narrator-kicker {
  color: var(--text-main);
}

/* The SCREENSHOT track: the app the file arrived in, drawn rather than photographed. A
   picture would go stale the day either app changes and nobody would notice; this cannot, because it
   is made of the same words the story is. Deliberately somebody ELSE's chrome — a title bar and a
   bubble — so it can never be read as a screen of this app, which is the rule the paper track exists
   for. */
.demo-narrator-card--screenshot {
  background: color-mix(in srgb, var(--text-main) 6%, var(--card-bg));
  border-color: var(--card-border);
}

.walkthrough-panel .demo-narrator-card--screenshot {
  padding: 0.75rem 0.9rem;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--text-main) 6%, transparent);
}

/* The sender's name reads as the other app's title bar, not as the story's voice. */
.demo-narrator-card--screenshot .demo-narrator-title {
  font-size: 0.95rem;
}

/* The attachment: a real button, because tapping it is what a trainer does with an attachment, and
   what it does here is what it does on a phone — LibrePT opens with the submission in it. */
.demo-narrator-attachment {
  /* STICKY, because the card scrolls and this is the control the step is asking for: on a short
     phone the message pushed the attachment below the fold, so the guide was pointing at a button
     the trainer had to go looking for. It stays on the card's bottom edge while the words move
     behind it. */
  position: sticky;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* A real touch target on a gym floor (no-hover rule). */
  min-height: 44px;
  margin-top: 0.35rem;
  padding: 0 0.9rem;
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  background: var(--card-bg);
  color: var(--text-main);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.demo-narrator-attachment i {
  color: var(--text-muted);
}

/* The guide's own card: the trainer has walked away from where the step happens, and the step's
   instruction is not what is on screen. Nothing decorative — it is the same card, and the two
   buttons under it are the panel's own — but it is not the story speaking, so it carries the
   guide's accent rather than a track's colour. */
.demo-narrator-card--off-track {
  border-left: 3px solid var(--primary);
}

.walkthrough-panel .demo-narrator-card--off-track {
  padding-left: 0.75rem;
  border-left: 3px solid var(--primary);
}

/* In the guide's head, beside the step counter: read in the same glance as "step 4 of 31", which is
   when a viewer wonders whose phone this is. It used to be a black tag over the app's own header,
   where it went unnoticed and read as one of the app's controls (reported 2026-08-23). */
.walkthrough-head .demo-narrator-persona {
  position: static;
  transform: none;
  z-index: auto;
  margin-right: auto;
  background: none;
  color: var(--text-muted);
  padding: 0;
}

/* Standing on its own — mounted without a guide around it, which is how it is tested alone. One
   persona at a time was the ruling, so this label is the only thing distinguishing the
   trainer's app from a client's: they look the same. */
.demo-narrator-persona {
  position: fixed;
  top: 0.55rem;
  left: 50%;
  z-index: 9500;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-main) 82%, transparent);
  color: var(--bg-color);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}