/* ============================================================
   tutorial.css — launch1 first-time-user tutorial popover.
   ============================================================
   Owns: #tutorial-popover and its descendants. Renders as a
   floating "terminal transmission" tooltip anchored next to a
   data-tutorial-anchor element by tutorial.js. Visually the same
   in light + dark modes by design — the popover is its own
   visual world (black bg, matrix phosphor accent, VT323 +
   monospace), independent of the page theme.

   Cascade slot: loaded after the per-feature CSS files. Mobile
   (<=640px) shapeshifts into a bottom sheet via media query
   below.

   Color tokens:
     #0a0a0a               — pure-black bg, matches dark-mode page bg
     #22ff5e               — matrix phosphor (dark-mode accent)
     #93d5a1               — muted phosphor for prompt + dim text
     var(--color-bg-page)  — used for the outer halo "punchthrough"
                             so the popover reads as embossed on
                             both light and dark page bgs
   ============================================================ */

/* ---- container -------------------------------------------- */

.tutorial-popover {
  position: absolute;
  z-index: 9999;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: #0a0a0a;
  color: #22ff5e;
  border: 1px solid #22ff5e;
  border-radius: 3px;
  font-family: var(--font-mono);
  box-shadow:
    0 0 0 3px var(--color-bg-page),
    0 0 30px rgba(34, 255, 94, 0.35);
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
}

.tutorial-popover.is-hidden {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

/* arrow — pointing UP from the popover to the anchor above. Two
   layers: outline (border color) on top, fill (bg color) just
   inside, so the arrow visually punches through the 1px border. */
.tutorial-popover::before,
.tutorial-popover::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 28px;
}
.tutorial-popover::before {
  top: -10px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 10px solid #22ff5e;
}
.tutorial-popover::after {
  top: -8px;
  margin-left: 2px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 8px solid #0a0a0a;
}

/* flipped arrow when the popover sits ABOVE the anchor */
.tutorial-popover.is-above::before {
  top: auto;
  bottom: -10px;
  border-bottom: none;
  border-top: 10px solid #22ff5e;
}
.tutorial-popover.is-above::after {
  top: auto;
  bottom: -8px;
  border-bottom: none;
  border-top: 8px solid #0a0a0a;
}

/* launch1-pr-b followup -- detached mode for oversized anchors.
   When the anchor is too tall for the popover to fit cleanly above
   or below, tutorial.js falls back to a fixed-center placement at
   the top of the viewport. The arrow no longer points at anything,
   so hide it; the halo on the anchor element still references the
   target. */
.tutorial-popover.is-detached::before,
.tutorial-popover.is-detached::after {
  display: none;
}

/* ---- terminal title bar ----------------------------------- */

.tutorial-popover__bar {
  background: #161616;
  color: #93d5a1;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #22ff5e;
}

.tutorial-popover__path {
  text-transform: lowercase;
}

.tutorial-popover__dots {
  display: flex;
  gap: 6px;
}
.tutorial-popover__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22ff5e;
  opacity: 0.4;
}
.tutorial-popover__dots span:first-child {
  opacity: 1;
}

/* ---- body ------------------------------------------------- */

.tutorial-popover__body {
  padding: 14px 14px 12px;
  font-size: 13px;
  line-height: 1.5;
}

.tutorial-popover__prompt {
  color: #93d5a1;
  font-size: 12px;
  margin-bottom: 8px;
}
.tutorial-popover__dollar {
  color: #22ff5e;
}

.tutorial-popover__text {
  color: #f5f1e8;
  margin: 0 0 14px;
}

.tutorial-popover__cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: #22ff5e;
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: tutorial-blink 1s steps(2) infinite;
}

@keyframes tutorial-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-popover__cursor { animation: none; }
  .tutorial-popover { transition: none; }
}

/* ============================================================
   Anchor spotlight (launch1-pr-b followup)
   ============================================================
   Applied by tutorial.js to whatever element the active popover
   points at. Pulsing phosphor halo + outline so the user can see
   exactly which UI element the copy is referring to. Removed on
   any dismiss path.

   Intentionally does NOT touch `position` or `z-index` — many
   anchors (the compose FAB is `position: fixed`, navbar brand
   sits in a flex row) have their own positioning that we don't
   want to clobber. Outline + box-shadow draw the halo in the
   element's existing stacking context, which is good enough for
   the surfaces the popover targets (no modal overlays in play
   while the popover is up).
   ============================================================ */

.tutorial-target-active {
  outline: 2px solid #22ff5e;
  outline-offset: 4px;
  /* v4.0.1 followup — `border-radius: inherit` USED to live here but
     it clobbered targets that set their own radius (notably the round
     .nav-avatar-btn at border-radius: 50%), because `inherit` reads
     from the parent (.nav-center has no border-radius → 0), turning
     the avatar's halo box-shadow into a rectangle that bled visually
     into the adjacent .nav-expandable space. Dropping the declaration
     lets each target keep its own border-radius; the box-shadow then
     follows the target's shape (round on avatars, square on grids /
     cards / FAB). Outline is rectangular regardless per CSS spec
     across the board. */
  animation: tutorial-target-pulse 1.4s ease-in-out infinite;
}

@keyframes tutorial-target-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(34, 255, 94, 0.25),
      0 0 18px rgba(34, 255, 94, 0.45);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(34, 255, 94, 0.4),
      0 0 28px rgba(34, 255, 94, 0.65);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-target-active {
    animation: none;
    box-shadow:
      0 0 0 4px rgba(34, 255, 94, 0.3),
      0 0 20px rgba(34, 255, 94, 0.5);
  }
}

/* ---- keystroke chips -------------------------------------- */

.tutorial-popover__keys {
  display: flex;
  gap: 8px;
  font-size: 11px;
}

.tutorial-popover__key {
  background: #0a0a0a;
  color: #22ff5e;
  border: 1px solid #22ff5e;
  padding: 5px 10px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 120ms ease, color 120ms ease;
}

.tutorial-popover__key:hover,
.tutorial-popover__key:focus-visible {
  background: #22ff5e;
  color: #0a0a0a;
  outline: none;
}

.tutorial-popover__key--primary {
  background: #22ff5e;
  color: #0a0a0a;
}
.tutorial-popover__key--primary:hover,
.tutorial-popover__key--primary:focus-visible {
  background: #5fff8a;
  color: #0a0a0a;
}

/* ============================================================
   Mobile shapeshift — bottom sheet
   ============================================================
   Anchored tooltips don't survive narrow viewports gracefully.
   At ≤640px we strip JS's absolute positioning, pin to the
   bottom, span full width, and drop the arrow.
   ============================================================ */

@media (max-width: 640px) {
  .tutorial-popover {
    position: fixed;
    top: auto !important;
    left: 12px !important;
    right: 12px;
    /* v4.0.1 hotfix — add safe-area-inset-bottom so the bottom-sheet
       clears the iOS home indicator on PWA installs. The variable
       fallback is 0px so non-iOS contexts stay at the original 16px. */
    bottom: calc(16px + var(--safe-area-bottom));
    width: auto;
    max-width: none;
    box-shadow:
      0 0 0 1px #0a0a0a,
      0 -8px 32px rgba(34, 255, 94, 0.25);
    transform: translateY(0);
  }
  /* v4.0.1 hotfix — first_post tutorial only. JS writes the current
     tutorial key onto the popover's data-current-key attribute on
     each queue advance; this selector lifts the bottom-sheet above
     the FAB's footprint (FAB sits at bottom: 1.5rem + safe-area
     inset, 56px tall) so the FAB tap target is unobstructed.
     ~96px of additional lift = 1.5rem bottom + 56px FAB + 24px
     breathing room. Defense-in-depth alongside dismiss_on_anchor_tap
     in tutorial.js: even if the user reads first then taps, the
     FAB stays visible. Specificity beats the default bottom-sheet
     rule via the attribute selector. */
  #tutorial-popover[data-current-key='first_post'] {
    bottom: calc(96px + var(--safe-area-bottom));
  }
  .tutorial-popover.is-hidden {
    transform: translateY(12px);
  }
  .tutorial-popover::before,
  .tutorial-popover::after {
    display: none;
  }
}

/* ============================================================
   /settings/tutorials cards
   ============================================================
   Lives in tutorial.css rather than account_settings.css because
   the card chrome borrows the terminal aesthetic (phosphor
   accents on the "live" cards, muted treatment on stubs) and
   stays in sync with the popover styling if either evolves.
   ============================================================ */

.tutorials-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.tutorial-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tutorial-card.is-stub {
  opacity: 0.65;
}

.tutorial-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.tutorial-card__blurb {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

.tutorial-card__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tutorial-card__screenshot {
  background: var(--color-bg-subtle);
  border: 1px dashed var(--color-border);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  padding: 24px 12px;
  text-align: center;
  letter-spacing: 0.08em;
}
.tutorial-card__screenshot img {
  display: block;
  max-width: 100%;
  border-radius: 3px;
}

.tutorial-card__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.tutorial-card__replay {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: 1px solid var(--color-accent-outline, #000);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  border-radius: 2px;
  cursor: pointer;
}
.tutorial-card__replay:hover,
.tutorial-card__replay:focus-visible {
  background: var(--color-accent-hover);
  outline: none;
}

.tutorial-card__soon {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  padding: 4px 8px;
  border-radius: 2px;
}

/* ============================================================
   /settings/tutorials card preview (launch1-tutorial-imgs)
   ============================================================
   Inline mini-popover rendered on each card in place of a
   screenshot. Same terminal-transmission vocabulary as the live
   popover, scaled down. Static — no JS, no positioning. The card
   itself carries the title + blurb + replay button; this just
   shows the user what the popover looks like.

   Catalog entries that DO set a `screenshot` path still render
   the image override via .tutorial-card__screenshot above; this
   block is the fallback when screenshot is None (the default for
   all 12 launch1 entries).
   ============================================================ */

.tutorial-card__preview {
  width: 100%;
  background: #0a0a0a;
  border: 1px solid #22ff5e;
  border-radius: 3px;
  font-family: var(--font-mono);
  overflow: hidden;
  box-shadow: 0 0 12px rgba(34, 255, 94, 0.18);
}

.tutorial-card__preview-bar {
  background: #161616;
  color: #93d5a1;
  padding: 4px 8px;
  font-size: 9px;
  letter-spacing: 0.06em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #22ff5e;
  gap: 8px;
}

.tutorial-card__preview-path {
  text-transform: lowercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.tutorial-card__preview-dots {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.tutorial-card__preview-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22ff5e;
  opacity: 0.4;
}
.tutorial-card__preview-dots span:first-child {
  opacity: 1;
}

.tutorial-card__preview-body {
  padding: 8px 10px 9px;
  font-size: 11px;
  line-height: 1.45;
}

.tutorial-card__preview-prompt {
  color: #93d5a1;
  font-size: 10px;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tutorial-card__preview-dollar {
  color: #22ff5e;
  margin-right: 2px;
}

.tutorial-card__preview-text {
  color: #f5f1e8;
  margin: 0 0 8px;
  font-size: 11px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tutorial-card__preview-keys {
  display: flex;
  gap: 5px;
  font-size: 9px;
  flex-wrap: wrap;
}

.tutorial-card__preview-key {
  background: #0a0a0a;
  color: #22ff5e;
  border: 1px solid #22ff5e;
  padding: 2px 6px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
}

.tutorial-card__preview-key--primary {
  background: #22ff5e;
  color: #0a0a0a;
}