/* Guided walkthroughs — spotlight, step card and the chooser.
 *
 * Painted by app/static/js/tour.js. Every colour resolves to a token or an
 * alias (SKILL rule 1); the two shadows are on a dialog and a sheet, which is
 * exactly what shadow is for (rule 6). Motion is transform/opacity only and
 * uses the motion tokens; prefers-reduced-motion is handled globally in
 * motion.css, so there is no kill-switch here — the entrances below simply
 * inherit the global duration override.
 */
@layer m3e {

  /* ── Root ─────────────────────────────────────────────────────────────── */

  .m3e-tour-root {
    position: fixed;
    inset: 0;
    z-index: 90;
    /* Inert until a tour runs: the backdrop and card set their own pointer
       behaviour, and the cut-out must stay clickable ("try it" steps). */
    pointer-events: none;
    display: none;
  }
  .m3e-tour-root[data-tour-active] { display: block; }

  /* ── Spotlight backdrop ───────────────────────────────────────────────── */

  /* Four panels around the target rather than one box-shadow ring: the hole
     between them is a real gap, so a click on the target reaches the target.
     Each panel is its own element so only transform/opacity ever animate. */
  .m3e-tour-backdrop {
    position: fixed;
    background: color-mix(in srgb, var(--md-sys-color-scrim) 62%, transparent);
    pointer-events: auto;
    opacity: 0;
    animation: m3e-tour-fade var(--md-sys-motion-duration-medium2, 300ms)
               var(--easing-effects, ease) forwards;
  }

  .m3e-tour-ring {
    position: fixed;
    border: 2px solid var(--brand);
    border-radius: var(--radius-md);
    pointer-events: none;
    opacity: 0;
    animation: m3e-tour-fade var(--md-sys-motion-duration-medium2, 300ms)
               var(--easing-effects, ease) forwards;
  }

  @keyframes m3e-tour-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* ── Step card ────────────────────────────────────────────────────────── */

  .m3e-tour-card {
    position: fixed;
    z-index: 1;
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 20px;
    border-radius: var(--radius-lg);
    background: var(--md-sys-color-surface-container-high);
    color: var(--fg1);
    box-shadow: var(--md-sys-elevation-3);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(8px);
    animation: m3e-tour-card-in var(--md-sys-motion-duration-medium3, 350ms)
               var(--easing-spatial, ease) forwards;
  }

  @keyframes m3e-tour-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .m3e-tour-card__counter {
    color: var(--fg2);
    font-variant-numeric: tabular-nums;
  }

  .m3e-tour-card__title {
    margin-top: 4px;
    color: var(--fg1);
    text-wrap: balance;
  }

  .m3e-tour-card__body {
    margin-top: 8px;
    color: var(--fg2);
  }


  /* The one "Try it" line a step may carry. Its own tone, so a reader can see
     at a glance which steps ask them to do something. */
  .m3e-tour-card__hint {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    background: var(--md-sys-color-surface-container-highest);
    color: var(--fg1);
  }

  .m3e-tour-card__hint-label {
    display: inline-block;
    margin-right: 8px;
    font-weight: 600;
    color: var(--brand);
  }

  /* The end of the first-sign-in chapter: continue, or read the rest later. */
  .m3e-tour-card__offer {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* The chapter whose page turned out to be the error page. No spotlight, no
     counter — one card that says the guide skipped it, centred rather than
     pointed at anything. */
  .m3e-tour-card--notice .m3e-tour-card__title { margin-top: 0; }

  .m3e-tour-card__actions {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .m3e-tour-card__spacer { flex: 1 1 auto; }

  /* Docked to the bottom on phones — a floating card next to a target is a
     desktop affordance; at 390px it would cover the thing it points at. */
  @media (max-width: 639px) {
    .m3e-tour-card {
      left: 8px;
      right: 8px;
      bottom: max(env(safe-area-inset-bottom), 8px);
      top: auto;
      width: auto;
      max-height: 60dvh;
      border-radius: var(--radius-lg);
    }

    /* A control at the very end of the document cannot be scrolled out from
       under a bottom-docked card — the page has no more scroll to give. For
       those steps the card docks under the top app bar instead and the target
       is spotlighted below it. Set by tour.js, never by a media query. */
    .m3e-tour-card--top {
      top: calc(var(--shell-top-bar-height, 64px) + 8px);
      bottom: auto;
    }
  }

  /* ── Chooser ──────────────────────────────────────────────────────────── */

  .m3e-tour-chooser-scrim {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
  }
  .m3e-tour-chooser-scrim[hidden] { display: none; }

  .m3e-tour-chooser {
    width: min(480px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 24px;
    border-radius: var(--radius-xl);
    background: var(--md-sys-color-surface-container-high);
    color: var(--fg1);
    box-shadow: var(--md-sys-elevation-3);
  }

  .m3e-tour-chooser__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
  }

  .m3e-tour-chooser__group { margin-top: 20px; }

  .m3e-tour-chooser__group-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  .m3e-tour-chooser__list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .m3e-tour-chooser__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
  }

  /* The "Guide & walkthroughs" entry is a plain .m3e-menu__item inside the one
     account menu now — it needs no rules of its own. */

  /* ── The handbook at /guide/ ──────────────────────────────────────────── */

  .m3e-guide {
    display: grid;
    gap: 24px;
  }

  @media (min-width: 1024px) {
    .m3e-guide {
      grid-template-columns: 280px minmax(0, 1fr);
      align-items: start;
    }
    .m3e-guide__rail {
      position: sticky;
      top: 88px;
      max-height: calc(100dvh - 120px);
      overflow-y: auto;
    }
  }

  /* The contents: a disclosure on a phone, a sticky rail from lg. Both are
     plain CSS here rather than responsive utilities, so the page needs no new
     Tailwind classes and no rebuild. */
  .m3e-guide__contents { display: block; }
  .m3e-guide__rail { display: none; }

  @media (min-width: 1024px) {
    .m3e-guide__contents { display: none; }
    .m3e-guide__rail { display: block; }
  }

  .m3e-guide__guide + .m3e-guide__guide { margin-top: 40px; }

  .m3e-guide__rail-group + .m3e-guide__rail-group { margin-top: 20px; }

  .m3e-guide__rail-title {
    color: var(--fg2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* L7-25: the guide rail was the single largest touch-target offender in the
     sweep — 162 links at 326×32, 2px apart, on the app's own help surface, the
     one place a confused member lands. Every other rail in the product
     (drawer 44/56, pagination 44, breadcrumb 44) already met the floor. It
     also swapped an opaque container colour on hover, which §2 retires: the
     house treatment is a state layer inside the link's own rounded box, and it
     fades rather than snapping. */
  .m3e-guide__rail-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .m3e-guide__rail-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    color: var(--fg1);
    text-decoration: none;
    /* The state layer is painted by ::before at inset 0, so it can never
       reach outside the link, and `isolation` keeps it under the label. */
    position: relative;
    isolation: isolate;
  }
  .m3e-guide__rail-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-short2)
                var(--md-sys-motion-easing-standard-effects-default);
  }
  @media (hover: hover) and (pointer: fine) {
    .m3e-guide__rail-link:hover::before      { opacity: 0.08; }
  }
  .m3e-guide__rail-link:focus-visible::before { opacity: 0.12; }
  .m3e-guide__rail-link:active::before       { opacity: 0.16; }

  .m3e-guide__chapter + .m3e-guide__chapter { margin-top: 16px; }

  .m3e-guide__chapter {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--md-sys-color-surface-container-low);
    scroll-margin-top: 88px;
  }

  .m3e-guide__chapter-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }

  .m3e-guide__steps {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    counter-reset: m3e-guide-step;
  }

  .m3e-guide__step {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
  }

  .m3e-guide__step-number {
    counter-increment: m3e-guide-step;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--md-sys-color-surface-container-highest);
    color: var(--fg2);
    font-variant-numeric: tabular-nums;
  }
  .m3e-guide__step-number::before { content: counter(m3e-guide-step); }

  .m3e-guide__step-hint {
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    background: var(--md-sys-color-surface-container-highest);
    color: var(--fg1);
  }
  .m3e-guide__step-hint-label {
    margin-right: 8px;
    font-weight: 600;
    /* Not --brand: the bright court red reads 3.9:1 on the raised hint chip.
       The on-container red holds >=7:1 in light and dark. */
    color: var(--md-sys-color-on-primary-container);
  }
  /* High contrast: the greyish raised hint chip carries only ~6:1 with the
     brand; ink text holds AAA with zero component overrides. */
  :root[data-contrast="high"] .m3e-guide__step-hint-label,
  :root[data-contrast="medium"] .m3e-guide__step-hint-label {
    color: var(--fg1);
  }

  .m3e-guide__empty {
    padding: 16px 0;
    color: var(--fg2);
  }

  /* Search hides what does not match; nothing is removed from the document. */
  .m3e-guide__chapter[data-guide-hidden] { display: none; }
  .m3e-guide__rail-link[data-guide-hidden] { display: none; }

  @media print {
    .m3e-guide { display: block; }
    .m3e-guide__rail,
    .m3e-guide__search,
    .m3e-guide__play { display: none; }
    .m3e-guide__chapter {
      border: 0;
      padding: 0;
      background: none;
      break-inside: avoid;
      margin-top: 18pt;
    }
  }
}