/* =============================================================================
 * me.css — /me consumer-side account page (Wave 2)
 * =============================================================================
 *
 * Two states in one stylesheet: signed-out (magic-link claim) + signed-in
 * (My Workouts list). The page intentionally stays default homefit-coral —
 * the brand-skin (Wave 4) transforms client-facing ARTIFACTS, not the
 * consumer's own UI. A consumer linked to multiple practitioners with
 * different skins shouldn't see their /me shift identity per session.
 *
 * Tokens mirror handout.css and styles.css. The `--seal-coral` /
 * `--seal-coral-light` pair stays defined here so a future copy of the
 * permanent homefit seal (e.g. on the signed-out footer) reads from the
 * unoverridable variables.
 * ===========================================================================*/

:root {
  --brand-default:     #ff6b35;
  --brand-dark:        #e85a24;
  --brand-light:       #ff8f5e;
  --brand-tint-bg:     rgba(255, 107, 53, 0.12);
  --brand-tint-border: rgba(255, 107, 53, 0.30);

  /* Permanent homefit seal tokens — NEVER overridden by .skin-{name}
     (Wave 4). The /me page is consumer-side default-coral and doesn't
     need a skin override path, but the tokens are defined here so any
     future seal renders read the same un-overridable values. */
  --seal-coral:        #ff6b35;
  --seal-coral-light:  #ff8f5e;

  --surface-bg:        #0f1117;
  --surface-base:      #1a1d27;
  --surface-raised:    #242733;
  --surface-border:    #2e3140;

  --ink-primary:       #f0f0f5;
  --ink-secondary:     #9ca3af;
  --ink-muted:         #6b7280;
  --ink-disabled:      #4b5563;

  --success:           #22c55e;
  --rest:              #86efac;

  --font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-bg);
  color: var(--ink-primary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

.me-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 48px;
}

/* --------------------------------------------------------------------------
 *  Loading skeleton
 * ------------------------------------------------------------------------*/
.me-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 80px auto;
  color: var(--ink-secondary);
  font-size: 13px;
}

.me-loading-dot {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 3px solid var(--surface-border);
  border-top-color: var(--brand-default);
  animation: me-spin 1s linear infinite;
}

@keyframes me-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .me-loading-dot { animation: none; border-top-color: var(--brand-default); }
}

/* --------------------------------------------------------------------------
 *  Page chrome — used by every signed-in / signed-out state
 * ------------------------------------------------------------------------*/
.me-page {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.me-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 14px;
  border-bottom: 1px solid var(--surface-border);
}

.me-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}

.me-matrix {
  width: 84px;
  height: auto;
  display: block;
}

.me-brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.2px;
  color: var(--ink-primary);
  display: none; /* matrix is enough on the small surface — bring back if needed */
}

/* The .studio wordmark renders coral (locked decision #28 + the
   feedback_homefit_studio_wordmark.md memory). Applied via the `dotsuf`
   class on both the dot AND the word, matching handout.css. */
.me-brand-name .dotsuf {
  color: var(--seal-coral);
}

.me-page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.2px;
  margin: 0;
  color: var(--ink-primary);
  flex: 1;
  text-align: center;
}

.me-avatar-chip {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-default) 0%, var(--brand-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
 *  STATE 1 — Claim / sign-in explainer + magic-link form
 * ------------------------------------------------------------------------*/
.me-explainer {
  background: var(--surface-base);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 16px 16px 14px;
}

.me-explainer h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.2px;
  margin: 0 0 6px;
  color: var(--ink-primary);
  line-height: 1.3;
}

.me-explainer p {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--ink-secondary);
  line-height: 1.55;
}

.me-tick-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.me-tick-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-secondary);
  line-height: 1.45;
}

.me-tick {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--brand-tint-bg);
  border: 1px solid var(--brand-tint-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  color: var(--brand-default);
}

.me-tick svg {
  width: 9px;
  height: 9px;
}

.me-attaching {
  background: var(--brand-tint-bg);
  border: 1px solid var(--brand-tint-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.me-attaching-icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--brand-light);
}

.me-attaching-text {
  font-size: 12px;
  color: var(--ink-primary);
  line-height: 1.45;
}

.me-magic-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.me-magic-form label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.me-magic-form input[type="email"] {
  width: 100%;
  background: var(--surface-base);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-primary);
  outline: none;
}

.me-magic-form input[type="email"]:focus {
  border-color: var(--brand-tint-border);
  box-shadow: 0 0 0 3px var(--brand-tint-bg);
}

.me-magic-form input[type="email"]::placeholder {
  color: var(--ink-muted);
}

.me-magic-form button {
  width: 100%;
  background: var(--brand-default);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 120ms ease-out, opacity 120ms ease-out;
}

.me-magic-form button:hover:not(:disabled) {
  background: var(--brand-dark);
}

.me-magic-form button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.me-magic-form .me-returning {
  font-size: 11.5px;
  color: var(--ink-secondary);
  line-height: 1.5;
  margin: 2px 0 0;
  text-align: center;
}

.me-claim-status {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.45;
}

.me-claim-status.is-error {
  background: rgba(220, 38, 38, 0.10);
  border: 1px solid rgba(220, 38, 38, 0.30);
  color: #fca5a5;
}

.me-claim-status.is-info {
  background: var(--brand-tint-bg);
  border: 1px solid var(--brand-tint-border);
  color: var(--ink-primary);
}

.me-footer-note {
  margin-top: 8px;
  text-align: center;
  font-size: 10.5px;
  color: var(--ink-muted);
  letter-spacing: 0.2px;
}

/* --------------------------------------------------------------------------
 *  STATE 2 — Signed-in My Workouts
 * ------------------------------------------------------------------------*/
.me-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: -8px;
}

.me-settings-link {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--ink-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}

.me-settings-link strong {
  color: var(--ink-secondary);
  font-weight: 500;
}

.me-gear {
  width: 12px;
  height: 12px;
  color: currentColor;
  flex-shrink: 0;
}

.me-signout-btn {
  background: none;
  border: 1px solid var(--surface-border);
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.3px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 120ms ease-out, border-color 120ms ease-out;
}

.me-signout-btn:hover {
  color: var(--ink-primary);
  border-color: var(--surface-raised);
}

.me-plans-list {
  display: flex;
  flex-direction: column;
  /* 2026-05-27 (artifact-card accordion) — gap shrinks back to the
     12px session-list spacing now that the fanned-deck back cards no
     longer leak vertically into the next row's top edge. The peek
     card behind sits flush with the parent row, so 12px clears it. */
  gap: 12px;
}

/* ============================================================
 * Artifact-card accordion on /me (2026-05-27, iterated afternoon)
 *
 * Replaces the fanned-deck-per-bundle from PR #548. Each bundle is
 * now a vertical session-card row with:
 *   - peek card behind (4px right + 5px down offset)
 *   - two stacked action buttons at the right end of the card body:
 *       * Studio button (pencil + chevron-right) — always visible
 *       * Artifacts button (stacked-cards + chevron-down) — only when
 *         the row has at least one published artifact
 *   - inline expand-accordion below the card
 *
 * Single-open across the list (JS enforces). The artifact stack is
 * inset 10dp from the session card's left edge so the coral 3dp rail
 * sits in a clean 13dp gutter (10dp visible + 3dp rail width), fully
 * unobscured by card chrome.
 *
 * Animations (2026-05-27 afternoon iteration — slowed for "deal of
 * cards" rhythm):
 *   - container grow:    540ms snappy spring (was 320ms).
 *   - peek lift + fade:  380ms snappy spring (was 220ms).
 *   - rail draw:         640ms snappy spring + 60ms delay (was 380ms + 30ms).
 *   - artifact slide:    820ms deal-spring with 140ms per-card stagger
 *                        and depth-proportional starting offsets
 *                        (-180% / -280% / -380% / -480%) — deeper cards
 *                        travel further. Was 320ms + 50ms*n.
 *   - action chevron:    280ms snappy spring (0 -> 180deg) on the
 *                        Artifacts button arrow.
 * `prefers-reduced-motion`: peek/rail/stagger become instant.
 * ============================================================ */

.me-session-row {
  position: relative;
  isolation: isolate;
}

/* Peek card behind the session card. 4px right + 5px down per spec.
   Slightly tinted (surface-raised) so the back-edge reads. Hidden via
   `display:none` when the row has no artifacts. */
.me-session-peek {
  position: absolute;
  inset: 0;
  background: var(--surface-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  transform: translate(4px, 5px);
  opacity: 0.92;
  z-index: 0;
  pointer-events: none;
  /* 2026-05-27 afternoon iteration: peek lift slowed from 220ms to 380ms
     to match the deal-of-cards rhythm of the artifact stack below. */
  transition:
    transform 380ms cubic-bezier(0.2, 0.9, 0.25, 1.2),
    opacity 300ms ease-out;
}
.me-session-row[data-has-artifacts="false"] .me-session-peek {
  display: none;
}
.me-session-row.is-expanded .me-session-peek {
  /* Lift upward + scale down + fade out on expand. */
  transform: translate(0, -6px) scale(0.98);
  opacity: 0;
}

/* The actual session card body. #567 — the action buttons now live in a
   dedicated third flex column inside the card body (not an absolute
   overlay), so the card body is a clean 3-column flex row. */
.me-session-card {
  position: relative;
  z-index: 1;
  background: var(--surface-base);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.me-session-card-body {
  display: flex;
  align-items: stretch;
  gap: 12px;
  /* #567 — even padding all round; the actions column is now a real flex
     child (col 3) so no right-edge reservation hack is needed. `stretch`
     lets the actions column take the full body height to pin Edit
     top-right + Artifacts bottom-right. */
  padding: 14px 12px 14px 16px;
}

/* Exercise-count glyph — coral mono-numeric, tabular figures. Mirrors
   mobile's _LeadingCountGlyph. */
.me-session-glyph {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -1.5px;
  color: var(--brand-default);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  min-width: 36px;
  text-align: left;
  flex-shrink: 0;
  line-height: 1;
  /* Body row is `align-items: stretch` (#567) so the actions column can
     fill the height; keep the count glyph vertically centred. */
  align-self: center;
}

.me-session-meta {
  flex: 1;
  min-width: 0;
  /* Vertically centre the content column against the stretched row. */
  align-self: center;
}

.me-session-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.1px;
  color: var(--ink-primary);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.me-session-sub {
  font-size: 11.5px;
  color: var(--ink-secondary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.me-session-sub .me-dot {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--ink-disabled);
  flex-shrink: 0;
}

/* Provenance "from <name> . <practice>" block inside the meta column.
   Replaces the .me-bundle-provenance pill — visually integrated into
   the session card rather than a separate block. */
.me-session-provenance {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-secondary);
}

/* Action stack — the card body's dedicated, fixed-width third column
   (#567). Studio/Edit pins to the top, Artifacts to the bottom via
   `justify-content: space-between`; both align to the right edge. The
   fixed width keeps the buttons from drifting with the title/meta
   length (the whole point of #567 — they were an absolute overlay
   before). Both buttons are ALWAYS visible — tapping the Artifact
   button on a row with zero published artifacts reveals an empty-state
   slider with onboarding copy instead of expanding the accordion. */
.me-action-stack {
  flex-shrink: 0;
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  z-index: 3;
}

/* One coral pill action button. Icon (svg, 18x18) + arrow glyph (text,
   14px). #567 legibility — coral fill raised to rgba(255,107,53,0.45)
   over a dark scrim base so the pill reads as a solid coral chip on ANY
   filmstrip hero behind it; backdrop-blur stays for extra separation.
   Hover brightens; press scales to 0.96. */
.me-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  /* Dark scrim base + coral fill layered via two backgrounds so the
     0.45 coral always sits on a darkened base regardless of hero. */
  background:
    linear-gradient(rgba(255, 107, 53, 0.45), rgba(255, 107, 53, 0.45)),
    rgba(15, 17, 23, 0.30);
  border: 1px solid rgba(255, 107, 53, 0.55);
  color: var(--brand-default);
  cursor: pointer;
  transition:
    background 140ms ease-out,
    border-color 140ms ease-out,
    transform 100ms ease-out;
  min-width: 60px;
  font-family: var(--font-body);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.me-action-btn:hover {
  background:
    linear-gradient(rgba(255, 107, 53, 0.58), rgba(255, 107, 53, 0.58)),
    rgba(15, 17, 23, 0.30);
  border-color: var(--brand-default);
}
.me-action-btn:active {
  transform: scale(0.96);
}
.me-action-btn:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 2px;
}
.me-action-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}
.me-action-btn .me-action-arrow {
  font-size: 14px;
  line-height: 1;
  color: var(--brand-default);
  font-weight: 700;
  transition: transform 280ms cubic-bezier(0.2, 0.9, 0.25, 1.2);
  display: inline-block;
}

/* Zero-size top spacer on non-owner rows (#567) so the column's
   space-between still pins the lone Artifacts button to the bottom. */
.me-action-spacer {
  display: block;
  width: 0;
  height: 0;
}

/* The Artifacts button's down-arrow rotates 180° on the expanded state. */
.me-session-row.is-expanded .me-action-btn.is-artifacts .me-action-arrow {
  transform: rotate(180deg);
}

/* Accordion target — CSS grid template animates from 0fr to 1fr,
   producing a smooth height tween for the artifact stack. Slowed from
   320ms to 540ms (2026-05-27 afternoon iteration) to match the
   deal-of-cards rhythm. */
.me-session-artifact-stack {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 540ms cubic-bezier(0.2, 0.9, 0.25, 1.2);
  position: relative;
}
.me-session-row.is-expanded .me-session-artifact-stack {
  grid-template-rows: 1fr;
}

/* Artifact stack inner container. Cards are inset 10dp from the session
   card's left edge with the coral rail in the resulting 13dp gutter
   (10dp visible space + 3dp rail width). The cards' own padding drops
   back to a normal value (rail is no longer obscured by card chrome). */
.me-session-artifact-inner {
  overflow: hidden;
  padding-top: 10px;
  padding-left: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

/* Coral hairline rail — 3px wide, sits in the 10dp gutter at the LEFT
   edge of the stack (left:0 of the inner container). ScaleY 0 -> 1 from
   the top, with a 60ms initial delay so siblings push down before the
   rail draws. Slowed from 380ms to 640ms (2026-05-27 afternoon). */
.me-session-artifact-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand-default);
  border-radius: 0 0 1.5px 1.5px;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 640ms cubic-bezier(0.2, 0.9, 0.25, 1.2) 60ms;
  opacity: 0.95;
  z-index: 2;
}
.me-session-row.is-expanded .me-session-artifact-inner::before {
  transform: scaleY(1);
}

/* Artifact card — inset 10dp from the session card's left edge (handled
   by the parent's `padding-left:13px`); the card's own padding is back
   to normal symmetric values now that the rail isn't behind it.
   Deal-of-cards entrance: cards start positioned ABOVE their final
   resting place (translateY -180% / -280% / -380% / -480% — deeper
   cards travel farther) and slide down into view as the container
   grows. The parent's overflow:hidden clips the cards behind the
   session card until they land. */
.me-artifact-card {
  background: var(--surface-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  transition:
    transform 820ms cubic-bezier(0.2, 0.85, 0.25, 1.18),
    opacity 300ms ease-out,
    border-color 140ms ease-out,
    box-shadow 140ms ease-out;
  position: relative;
}
/* Depth-proportional starting offsets so deeper cards travel farther.
   These are the REST-state values; the .is-expanded selector below
   resets transform to translateY(0) for the landed state. */
.me-artifact-card:nth-child(1) { transform: translateY(-180%); }
.me-artifact-card:nth-child(2) { transform: translateY(-280%); }
.me-artifact-card:nth-child(3) { transform: translateY(-380%); }
.me-artifact-card:nth-child(4) { transform: translateY(-480%); }
.me-artifact-card:nth-child(5) { transform: translateY(-480%); }
.me-artifact-card:nth-child(6) { transform: translateY(-480%); }
.me-artifact-card:nth-child(7) { transform: translateY(-480%); }
.me-artifact-card:nth-child(8) { transform: translateY(-480%); }

.me-session-row.is-expanded .me-artifact-card {
  transform: translateY(0);
  opacity: 1;
}
/* Per-card stagger — 80ms initial + 140ms per nth-child(n). Card N
   lands at 80 + 140*(N-1) ms after the row enters .is-expanded:
     1 -> 80ms, 2 -> 220ms, 3 -> 360ms, 4 -> 500ms, 5 -> 640ms,
     6 -> 780ms, 7 -> 920ms, 8 -> 1060ms. */
.me-session-row.is-expanded .me-artifact-card:nth-child(1) { transition-delay: 80ms; }
.me-session-row.is-expanded .me-artifact-card:nth-child(2) { transition-delay: 220ms; }
.me-session-row.is-expanded .me-artifact-card:nth-child(3) { transition-delay: 360ms; }
.me-session-row.is-expanded .me-artifact-card:nth-child(4) { transition-delay: 500ms; }
.me-session-row.is-expanded .me-artifact-card:nth-child(5) { transition-delay: 640ms; }
.me-session-row.is-expanded .me-artifact-card:nth-child(6) { transition-delay: 780ms; }
.me-session-row.is-expanded .me-artifact-card:nth-child(7) { transition-delay: 920ms; }
.me-session-row.is-expanded .me-artifact-card:nth-child(8) { transition-delay: 1060ms; }

/* Collapse stagger — REVERSED (2026-05-27 evening iteration). Bottom
   card retreats first, top card last. Visual sense: the deck restacks
   in the order it laid out, but in reverse. The transition-delay is
   applied on the non-expanded state of the row so it only fires during
   the collapse transition. Up to 5 cards mirror exactly per spec; cards
   6-8 chain past 80ms in reverse order so the rhythm continues. */
.me-session-row:not(.is-expanded) .me-artifact-card:nth-child(1) { transition-delay: 640ms; }
.me-session-row:not(.is-expanded) .me-artifact-card:nth-child(2) { transition-delay: 500ms; }
.me-session-row:not(.is-expanded) .me-artifact-card:nth-child(3) { transition-delay: 360ms; }
.me-session-row:not(.is-expanded) .me-artifact-card:nth-child(4) { transition-delay: 220ms; }
.me-session-row:not(.is-expanded) .me-artifact-card:nth-child(5) { transition-delay: 80ms; }
.me-session-row:not(.is-expanded) .me-artifact-card:nth-child(6) { transition-delay: 0ms; }
.me-session-row:not(.is-expanded) .me-artifact-card:nth-child(7) { transition-delay: 0ms; }
.me-session-row:not(.is-expanded) .me-artifact-card:nth-child(8) { transition-delay: 0ms; }

/* Container shrink waits for cards to finish retreating (800ms delay
   per spec). The grow direction (.is-expanded) gets zero delay so the
   expand starts immediately and the cards land into the growing
   container. */
.me-session-row:not(.is-expanded) .me-session-artifact-stack {
  transition-delay: 800ms;
}
.me-session-row.is-expanded .me-session-artifact-stack {
  transition-delay: 0ms;
}

/* Rail recedes mid-collapse, after most cards have left (600ms delay).
   Combined with the 640ms transform duration the rail finishes its
   scaleY(0) tween at the same moment the container shrink begins. */
.me-session-row:not(.is-expanded) .me-session-artifact-inner::before {
  transition: transform 640ms cubic-bezier(0.2, 0.9, 0.25, 1.2) 600ms;
}

/* Peek slides back in toward the end of the collapse (1100ms delay),
   mirroring its "lift first" role on expand. */
.me-session-row:not(.is-expanded) .me-session-peek {
  transition:
    transform 380ms cubic-bezier(0.2, 0.9, 0.25, 1.2) 1100ms,
    opacity 300ms ease-out 1100ms;
}
.me-session-row.is-expanded .me-session-peek {
  transition:
    transform 380ms cubic-bezier(0.2, 0.9, 0.25, 1.2),
    opacity 300ms ease-out;
}

.me-artifact-card:hover {
  border-color: rgba(255, 255, 255, 0.10);
}
.me-artifact-card:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 2px;
}
/* #568 — artifact cards can only be OPENED, not selected. The front
   card no longer gets a coral border + coral glow + coral-filled pill;
   every card uses the neutral surface-border so none reads as
   "selected". Mirrors the Flutter `_ArtifactCard` twin. The `.is-front`
   class is still emitted by me.js but carries no distinct styling. */

.me-artifact-card-glyph {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--brand-tint-bg);
  border: 1px solid var(--brand-tint-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand-default);
}
.me-artifact-card-glyph.is-handout {
  color: var(--brand-light);
}
.me-artifact-card-glyph svg {
  width: 22px;
  height: 22px;
}
.me-artifact-card-meta {
  flex: 1;
  min-width: 0;
}
.me-artifact-card-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-primary);
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.me-artifact-card-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: var(--surface-base);
  color: var(--ink-muted);
  border: 1px solid var(--surface-border);
}

/* Owner-only "Use as template" CTA — lives INSIDE the expanded
   artifact area per the redesigned spec (not below the session card).
   Uses the same coral-tinted chrome the legacy bundle CTA had. It is
   one of the staggered children of .me-session-artifact-inner so the
   nth-child(N) transition-delay rules already cover its landing time;
   the depth-proportional starting offset is also inherited via the
   nth-child(N) transform rules above. */
.me-session-template-cta {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--brand-tint-bg);
  border: 1px solid var(--brand-tint-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--brand-default);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.1px;
  cursor: pointer;
  transition:
    background 120ms ease-out,
    border-color 120ms ease-out,
    transform 820ms cubic-bezier(0.2, 0.85, 0.25, 1.18),
    opacity 300ms ease-out;
  opacity: 0;
}
.me-session-row.is-expanded .me-session-template-cta {
  transform: translateY(0);
  opacity: 1;
}
.me-session-template-cta:hover {
  background: rgba(255, 107, 53, 0.18);
  border-color: rgba(255, 107, 53, 0.45);
}
.me-session-template-cta:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 2px;
}
.me-session-template-cta-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-default);
  flex-shrink: 0;
}
.me-session-template-cta-icon svg {
  width: 16px;
  height: 16px;
}
.me-session-template-cta-label {
  flex: 1;
  min-width: 0;
}

/* Empty-state slider (2026-05-27 evening iteration) — appears below the
   session card when the consumer/practitioner taps the Artifact button
   on a row with zero published artifacts. Same accordion mechanism as
   the real stack (grid-template-rows 0fr -> 1fr); the leading rail is
   text-dim grey (not coral) to differentiate from the real artifact
   accordion. Auto-dismisses after 3.5 seconds via JS, or collapses if
   another row is interacted with. */
.me-session-empty-state {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 360ms cubic-bezier(0.2, 0.9, 0.25, 1.2);
  position: relative;
}
.me-session-row.is-empty-revealed .me-session-empty-state {
  grid-template-rows: 1fr;
}
.me-session-empty-state-inner {
  overflow: hidden;
  padding-top: 10px;
  padding-left: 13px;
  position: relative;
}
.me-session-empty-state-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ink-secondary, #8A93A8);
  border-radius: 0 0 1.5px 1.5px;
  opacity: 0.5;
}
.me-session-empty-state-banner {
  background: rgba(138, 147, 168, 0.10);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--ink-secondary);
  font-size: 13px;
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.me-session-empty-state-banner-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(138, 147, 168, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-secondary);
}
.me-session-empty-state-banner-icon svg {
  width: 18px;
  height: 18px;
}
.me-session-empty-state-banner strong {
  color: var(--ink-primary);
  font-weight: 600;
}

/* prefers-reduced-motion overrides per spec:
     - peek lift / rail draw / artifact stagger become instant (0ms).
     - container grow becomes 0ms (snap).
     - artifact cards still land at translateY(0) — only the transition
       is removed.
     - action-button arrow rotation stays (~140ms) because it's a
       directional cue, not decoration. */
@media (prefers-reduced-motion: reduce) {
  .me-session-peek,
  .me-session-row:not(.is-expanded) .me-session-peek,
  .me-session-row.is-expanded .me-session-peek { transition: none; }
  .me-session-artifact-stack,
  .me-session-row:not(.is-expanded) .me-session-artifact-stack,
  .me-session-row.is-expanded .me-session-artifact-stack { transition: none; }
  .me-session-artifact-inner::before,
  .me-session-row:not(.is-expanded) .me-session-artifact-inner::before { transition: none; }
  .me-artifact-card { transition: none; }
  .me-session-template-cta { transition: none; }
  .me-session-empty-state { transition: none; }
  .me-action-btn .me-action-arrow {
    transition: transform 140ms ease-out;
  }
}

/* The .me-prov-avatar / .me-prov-text / .me-live-dot rules below are
   shared with the new session-accordion provenance markup (rendered
   inside .me-session-provenance by buildBundleProvenance). The
   pre-2026-05-27 selectors .me-plan-card / .me-card-top / .me-kind-glyph
   / .me-card-meta / .me-card-kind / .me-card-title / .me-card-sub /
   .me-chev / .me-provenance were removed when the fanned-deck /
   flat-card UI was retired in favour of the accordion. */

.me-prov-avatar {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3a3f4d 0%, #1f2230 100%);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 8.5px;
  color: var(--ink-secondary);
  letter-spacing: 0.3px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.me-prov-text {
  font-size: 11px;
  color: var(--ink-primary);
  letter-spacing: 0.1px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-prov-text .me-prov-who {
  color: var(--brand-light);
  font-weight: 600;
}

.me-prov-text .me-prov-practice {
  color: var(--ink-secondary);
}

.me-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--rest);
  box-shadow: 0 0 0 2px rgba(134, 239, 172, 0.18);
  flex-shrink: 0;
}

.me-empty {
  background: var(--surface-base);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 18px 18px;
  text-align: center;
}

.me-empty h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 6px;
  color: var(--ink-primary);
}

.me-empty p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-secondary);
  line-height: 1.5;
}

.me-list-footnote {
  margin-top: 8px;
  text-align: center;
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
 *  STATE 3 — magic-link sent card
 * ------------------------------------------------------------------------*/
.me-sent-card {
  background: var(--surface-base);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 28px 22px 22px;
  text-align: center;
  margin: 32px auto 0;
}

.me-sent-icon {
  width: 36px;
  height: 36px;
  color: var(--brand-default);
  margin: 0 auto 10px;
  display: block;
}

.me-sent-card h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--ink-primary);
}

.me-sent-card p {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ink-secondary);
  line-height: 1.55;
}

.me-sent-card p strong {
  color: var(--ink-primary);
  word-break: break-all;
}

.me-sent-quiet {
  font-size: 11px !important;
  color: var(--ink-muted) !important;
  margin: 12px 0 16px !important;
}

.me-sent-resend {
  background: none;
  border: 1px solid var(--surface-border);
  color: var(--ink-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 120ms ease-out, border-color 120ms ease-out;
}

.me-sent-resend:hover {
  color: var(--ink-primary);
  border-color: var(--surface-raised);
}

/* --------------------------------------------------------------------------
 *  STATE 4 — Error fallback
 * ------------------------------------------------------------------------*/
.me-error {
  width: 100%;
  max-width: 440px;
  background: var(--surface-base);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  text-align: center;
  margin: 48px auto 0;
}

.me-error-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(220, 38, 38, 0.30);
  color: #f87171;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  margin: 0 auto 12px;
}

.me-error h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 6px;
  color: var(--ink-primary);
}

.me-error p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-secondary);
  line-height: 1.55;
}