/* ==========================================================================
   TABIFLOW V2 — Pin Quest "Coming Soon" Pane
   --------------------------------------------------------------------------
   File: styles/components/pin-quest.css
   Source: Mock-up/planner-v2-mockup.html §9 (Pin Quest slide-in pane)
   Load order: After day-card.css, before shell.css

   C1 scope: Coming Soon shell only — no gameplay. Gameplay wires in v1.5.
   A fogged stop tap (.stop-row.fogged) opens this pane via openPinQuestPane().
   Pane shows Tabi mascot + "Coming soon · v1.5" + manual-pin workaround hint.

   All rules scoped to html.tf-v2panel — V1 users never see this surface.

   z-index map:
     #pq-overlay: 289  (below About/mochi-safety 299/300; above stop-action 190)
     #pq-pane:    290

   !important policy: every usage annotates which inline style it defeats.
   ========================================================================== */


/* ── 1. Overlay / backdrop ─────────────────────────────────────────────── */
/*
 * Fixed full-screen dimmer. Same pattern as #tf-about-backdrop in modals.css.
 * style="display:none" set in planner.html; .is-open reveals via !important.
 */

html.tf-v2panel #pq-overlay {
  position: fixed;
  inset: 0;
  z-index: 289;
  background: rgba(0, 0, 0, 0.55);
  display: none;
}

html.tf-v2panel #pq-overlay.is-open {
  display: block !important; /* defeats inline style="display:none" */
  animation: pq-fade-in var(--tf-duration-fast) linear both;
}


/* ── 2. Pane shell ─────────────────────────────────────────────────────── */
/*
 * Bottom-sheet: anchored to bottom edge, full width, rounded top corners.
 * max-height: 80vh keeps the topbar visible on small devices.
 * padding-bottom: env(safe-area-inset-bottom) clears iOS home indicator.
 *
 * display:none → display:flex !important on .is-open.
 * Slide-up uses @keyframes (not transition) because display is not animatable
 * via transition — the keyframe fires on class-add regardless of prior display.
 */

html.tf-v2panel #pq-pane {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 290;
  background: var(--tf-bg-elevated);
  border-top: 1px solid var(--tf-border-soft);
  border-radius: var(--tf-radius-lg) var(--tf-radius-lg) 0 0;
  display: none;
  flex-direction: column;
  max-height: 80vh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html.tf-v2panel #pq-pane.is-open {
  display: flex !important; /* defeats inline style="display:none" */
  animation: pq-slide-up var(--tf-duration-normal) var(--tf-ease) both;
}


/* ── 3. Slide-up + fade-in keyframes ───────────────────────────────────── */
/*
 * pq-slide-up: 20px translate (not 100%) — subtle lift, not a full-screen
 * swipe. Matches the visual weight of a bottom-sheet appearing mid-task.
 */

@keyframes pq-slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes pq-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ── 4. Pane header ────────────────────────────────────────────────────── */
/*
 * "Pin Quest" title left, × close button right.
 * Close: min-height/width 44px (--tf-tap-min) per IW10 tap-target spec.
 * No .focus() call on close — v2-bug-log #1 (iOS ghost-click after tap).
 */

html.tf-v2panel .pq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tf-space-lg) var(--tf-space-lg) 0;
  gap: var(--tf-space-sm);
  flex-shrink: 0;
}

html.tf-v2panel .pq-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--tf-text-primary);
  flex: 1;
}

html.tf-v2panel .pq-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--tf-text-secondary);
  cursor: pointer;
  min-height: var(--tf-tap-min);
  min-width: var(--tf-tap-min);
  border-radius: var(--tf-radius-md);
  transition: background var(--tf-duration-fast);
  padding: 0;
  font-family: inherit;
  line-height: 1;
  flex-shrink: 0;
}

html.tf-v2panel .pq-close:hover,
html.tf-v2panel .pq-close:focus-visible {
  background: var(--tf-bg-surface);
  outline: none;
}

html.tf-v2panel .pq-close:focus-visible {
  box-shadow: var(--tf-focus-ring);
}


/* ── 5. Pane body ──────────────────────────────────────────────────────── */
/*
 * Scrollable if content overflows max-height. Centered column layout.
 * -webkit-overflow-scrolling: touch for momentum scroll on iOS.
 */

html.tf-v2panel .pq-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--tf-space-xl) var(--tf-space-lg) var(--tf-space-xxl);
  gap: var(--tf-space-xl);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}


/* ── 6. Tabi mascot avatar ─────────────────────────────────────────────── */
/*
 * --tf-tabi-bg / --tf-tabi-border: teal family tokens defined in tokens.css.
 * Light mode: tokens auto-shift to more saturated values (tokens.css body.tf-mode-light).
 *
 * FLAG (mockup §9 annotation): 🐱 emoji is Tabi stand-in placeholder.
 * Real Tabi mascot art deferred to production — same flag as §1 Mochi avatar.
 */

html.tf-v2panel .pq-mascot {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--tf-tabi-bg);
  border: 2px solid var(--tf-tabi-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  flex-shrink: 0;
}


/* ── 7. Coming-soon card ───────────────────────────────────────────────── */
/*
 * Elevated surface card holding three elements:
 *   .pq-soon-label  — pill badge "COMING SOON · V1.5"
 *   .pq-headline    — "Pin Quest"
 *   .pq-workaround  — "Refine pins manually using the pin modal for now."
 */

html.tf-v2panel .pq-soon-card {
  background: var(--tf-bg-surface);
  border: 1px solid var(--tf-border-soft);
  border-radius: var(--tf-radius-lg);
  padding: var(--tf-space-xl);
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tf-space-md);
  text-align: center;
}

html.tf-v2panel .pq-soon-label {
  display: inline-flex;
  align-items: center;
  gap: var(--tf-space-xs);
  background: var(--tf-primary-soft);
  color: var(--tf-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px var(--tf-space-sm);
  border-radius: var(--tf-radius-full);
  border: 1px solid rgba(185, 182, 240, 0.2);
  flex-shrink: 0;
}

html.tf-v2panel .pq-headline {
  font-size: 18px;
  font-weight: 700;
  color: var(--tf-text-primary);
  margin: 0;
  line-height: 1.3;
}

html.tf-v2panel .pq-workaround {
  font-size: 13px;
  color: var(--tf-text-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 260px;
}


/* ── 8. Reduced-motion override ────────────────────────────────────────── */
/*
 * prefers-reduced-motion: both pane and overlay appear instantly.
 * Transition on .pq-close is safe to keep (opacity/bg only, not position).
 */

@media (prefers-reduced-motion: reduce) {
  html.tf-v2panel #pq-pane.is-open {
    animation: none;
  }

  html.tf-v2panel #pq-overlay.is-open {
    animation: none;
  }
}