/* ---------- First-run tour module (#627, #781): the styles moved out of the Inbox page ----------
     These rules moved verbatim from `src/inbox/app.html` into this file (#781). They are the
     first-run tour card and its scrim and arrow, and the worked-example chrome and animations on the
     Mail list, reader and reply during the demo send. The shared reduced-motion block that also
     stops these animations stays in the shell, because it carries the universal selector and the
     comments-drawer transition. No selector here starts with the document-root pseudo-class, so none
     had to stay behind for the inline token block (#778 lesson). The module stylesheet loads after
     the canvas sheets and before the inline <style>, so the canvas base is still overridden and the
     inline shell rules still win a same-specificity tie. */


  .example-chip{font-size:11px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line);border-radius:99px;padding:2px 7px}
  .example-note{margin:8px 0 0;font-size:13px;color:var(--ink-2)}
  .scroller.example-landing{overflow:hidden}
  @keyframes example-land{
    0%{opacity:0;transform:translateY(-88px)}
    72%{opacity:1;transform:translateY(7px)}
    100%{opacity:1;transform:none}
  }
  @keyframes example-push{from{transform:translateY(-88px)}to{transform:none}}
  @keyframes example-unread-pulse{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.45)}
  }
  .ml-r.example-arrive{animation:example-land 1.15s cubic-bezier(.16,.84,.32,1);z-index:3}
  .ml-r.example-push,.daylab.example-push{animation:example-push 1.15s cubic-bezier(.16,.84,.32,1)}
  .ml-r.example-arrive.unread .udot{animation:example-unread-pulse .55s ease 1.15s 3}
  .ml-r.example-nudge{box-shadow:inset 3px 0 0 var(--unread)}
  @keyframes example-nudge-flash{
    0%,100%{background:transparent}
    50%{background:var(--sel-2)}
  }
  .ml-r.example-nudge{animation:example-nudge-flash 1.3s ease-in-out infinite}
  @keyframes example-archive{
    0%{opacity:1;transform:none}
    100%{opacity:0;transform:translateX(36px)}
  }
  .ml-r.example-archive{animation:example-archive .55s ease forwards;pointer-events:none}
  /* The first-run tour is the design-canvas tour card (.sh-tour, #576): a light scrim, a step
     count, a serif title, the body, and Skip (quiet) and Next (ink). It keeps the shell's
     action-driven anchoring, so the card is placed beside its target by placeTour and the scrim
     stays pointer-transparent to let the operator act on the pointed control. */
  .sh-tour-scrim{position:fixed;inset:0;z-index:44;background:var(--scrim-tour);animation:fadeIn var(--dur) var(--ease);pointer-events:none}
  .sh-tour{position:fixed;z-index:45;width:min(340px,calc(100% - 32px));padding:16px 16px 12px;display:flex;flex-direction:column;gap:6px;background:var(--canvas);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-float);animation:popIn .26s var(--ease)}
  .sh-tour[data-step="thread"]{width:min(300px,32vw)}
  /* The live region is a real box (a flex column with the same 6px gap as the card), not
     display:contents, because some accessibility trees drop a contents box and then the step
     change is not announced (adr/0055 decision 12, #576). The column and gap keep the count,
     title and body at the same spacing, so the card still matches the canvas. */
  .sh-tour-live{display:flex;flex-direction:column;gap:6px}
  .sh-tour .t-body{font-size:13.5px;color:var(--ink-2);margin:0}
  .sh-tour-foot{display:flex;align-items:center;gap:8px;margin-top:6px}
  .sh-tour-foot .grow{flex:1}
  .sh-tour-arrow{position:absolute;width:12px;height:12px;background:var(--canvas);border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
  .sh-tour[data-side="left"] .sh-tour-arrow{left:-7px;top:22px;transform:rotate(45deg)}
  .sh-tour[data-side="right"] .sh-tour-arrow{right:-7px;top:22px;transform:rotate(-135deg)}
  /* The thread step sits above the reply box with the caret pointing down at the Send button
     (#578). The caret is 24px in from the card's right edge, over the Send column. */
  .sh-tour[data-side="down"] .sh-tour-arrow{top:auto;left:auto;right:24px;bottom:-7px;transform:rotate(-45deg)}
  @keyframes send-pulse{
    0%,100%{transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb, var(--unread) 45%, transparent)}
    50%{transform:scale(1.08);box-shadow:0 0 0 10px color-mix(in srgb, var(--unread) 0%, transparent)}
  }
  /* The first-run example hooks target the canvas reader and reply (#578): #reader is .ml-rdr and
     #replyPane is .ml-reply. On the display-only example the heavy reply chrome is hidden, the Send
     button (.btn-ink) pulses, and the whole reply box drops out during the send animation. The
     Send-button pulse rule (`.ml-reply.example-send .btn-ink`) stays in the shell (see the inline
     <style>), so the design-system button check reads the shared `.btn-ink` definition first; it
     uses the send-pulse keyframe above. */
  .ml-rdr.example-simple .seg,
  .ml-rdr.example-simple .ml-cctog,
  .ml-rdr.example-simple .ml-addr,
  .ml-rdr.example-simple .addr-cap,
  .ml-rdr.example-simple .addr-known,
  .ml-rdr.example-simple .ml-tb,
  .ml-rdr.example-simple .ml-brief{display:none}
  .ml-rdr.example-sending .ml-reply{display:none}
  @keyframes example-sent{
    0%{opacity:0;transform:translateY(56px) scale(.96)}
    100%{opacity:1;transform:none}
  }
  .msg.example-sent{animation:example-sent .55s cubic-bezier(.16,.84,.32,1)}