/* ============================================================
   help-cozy.css — cozy repaint for the Help & Tips page
   Pairs with manishelf-cozy.css (global palette + topbar)
   ============================================================ */

/* ---------- Contact note ---------- */
body.help-page .help-contact-note {
  font-family: 'Nunito', sans-serif !important;
  text-align: center !important;
  color: var(--ink-soft, #4a3a62) !important;
  font-size: 0.95rem !important;
  margin: 48px auto 24px !important;
  max-width: 560px !important;
}
body.help-page .help-contact-note a {
  color: var(--ember, #c9765a) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
}
body.help-page .help-contact-note a:hover {
  color: var(--plum, #6b4a8a) !important;
}
@media (prefers-color-scheme: dark) {
  body.help-page .help-contact-note { color: var(--ink-soft, #d8c9ec) !important; }
  body.help-page .help-contact-note a { color: var(--ember, #e89878) !important; }
  body.help-page .help-contact-note a:hover { color: var(--plum-dusk, #a98ec9) !important; }
}

/* ---------- Hero ---------- */

body.help-page .help-hero {
  padding: clamp(32px, 5vh, 56px) 0 0 !important;
  border-bottom: 0 !important;
  margin-bottom: 14px !important;
  background: transparent !important;
  text-align: center !important;
}

body.help-page .help-hero-title {
  color: var(--plum, #6b4a8a) !important;
  font-size: clamp(2.4rem, 5vw, 4rem) !important;
  line-height: 1.05 !important;
  margin: 0 0 14px !important;
  text-align: center !important;
}
body.help-page .help-hero-title em {
  font-style: normal !important;
  color: var(--ember, #c9765a) !important;
}
body.help-page .help-hero-sub {
  font-family: 'Nunito', sans-serif !important;
  color: var(--ink, #2a1f3d) !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  max-width: none !important;
  white-space: nowrap !important;
  margin: 0 auto !important;
  text-align: center !important;
  background: none !important;
  font-style: normal !important;
}

/* ---------- Section rule ---------- */

body.help-page .mani-section-rule {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 0 10px !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
body.help-page .mani-section-rule .rule-num {
  color: var(--ink, #2a1f3d) !important;
  font-weight: 700 !important;
}
body.help-page .mani-section-rule .rule-label {
  color: var(--ink-soft, #4a3a62) !important;
  font-weight: 500 !important;
}
body.help-page .mani-section-rule .rule-line {
  flex: 1 !important;
  height: 1px !important;
  background-image: linear-gradient(to right,
    rgba(107, 74, 138, 0.30) 40%,
    transparent 40%) !important;
  background-size: 8px 1px !important;
}

body.help-page .help-section {
  padding: 0 !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* ---------- Tip rows ---------- */

body.help-page .help-tips {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(36px, 5vh, 64px) !important;
  padding: 14px 0 clamp(20px, 3vh, 28px) !important;
}

body.help-page .tip-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(24px, 3vw, 56px) !important;
  align-items: center !important;
  padding: clamp(24px, 3vw, 40px) !important;
  border-radius: 2px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 2px 2px -2px rgba(42, 31, 61, 0.12),
    0 22px 22px -14px rgba(42, 31, 61, 0.35),
    0 38px 32px -22px rgba(42, 31, 61, 0.30) !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s !important;
}
/* Peeled-bottom cast shadow so the sticky looks slightly bent at its base.
   Position/angle/intensity varies per card so it doesn't look copy-pasted. */
body.help-page .tip-row::after {
  content: "" !important;
  position: absolute !important;
  bottom: -22px !important;
  height: 30px !important;
  background: radial-gradient(ellipse at center top,
    rgba(42, 31, 61, 0.30) 0%,
    rgba(42, 31, 61, 0.16) 40%,
    transparent 75%) !important;
  filter: blur(6px) !important;
  pointer-events: none !important;
  z-index: -1 !important;
  border-radius: 50% !important;
}
body.help-page .tip-row:nth-child(4n+1)::after {
  left: 6% !important; right: 12% !important;
  bottom: -20px !important; height: 28px !important;
  transform: rotate(-1.2deg) !important;
}
body.help-page .tip-row:nth-child(4n+2)::after {
  left: 14% !important; right: 5% !important;
  bottom: -24px !important; height: 32px !important;
  transform: rotate(1.4deg) !important;
}
body.help-page .tip-row:nth-child(4n+3)::after {
  left: 10% !important; right: 10% !important;
  bottom: -18px !important; height: 26px !important;
  transform: rotate(-0.6deg) !important;
}
body.help-page .tip-row:nth-child(4n)::after {
  left: 4% !important; right: 14% !important;
  bottom: -26px !important; height: 34px !important;
  transform: rotate(1.8deg) !important;
}
/* Adhesive strip on top — darker shade of each sticky colour */
body.help-page .tip-row::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 8% !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
body.help-page .tip-row:nth-child(4n+1)::before {
  background: linear-gradient(to bottom, #fcd76a, rgba(252, 215, 106, 0)) !important;
}
body.help-page .tip-row:nth-child(4n+2)::before {
  background: linear-gradient(to bottom, #f7b294, rgba(247, 178, 148, 0)) !important;
}
body.help-page .tip-row:nth-child(4n+3)::before {
  background: linear-gradient(to bottom, #c8b0e2, rgba(200, 176, 226, 0)) !important;
}
body.help-page .tip-row:nth-child(4n)::before {
  background: linear-gradient(to bottom, #a8d7b7, rgba(168, 215, 183, 0)) !important;
}
/* Sticky-note color rotation, cycling through 4 postit colors */
body.help-page .tip-row:nth-child(4n+1) {
  background: #ffe88a !important;
  transform: rotate(-1deg) !important;
}
body.help-page .tip-row:nth-child(4n+2) {
  background: #ffc8b0 !important;
  transform: rotate(0.9deg) !important;
}
body.help-page .tip-row:nth-child(4n+3) {
  background: #d9c6ed !important;
  transform: rotate(-0.6deg) !important;
}
body.help-page .tip-row:nth-child(4n) {
  background: #c4e6d0 !important;
  transform: rotate(1.2deg) !important;
}
body.help-page .tip-row:nth-child(4n+1):hover { transform: rotate(-1deg) translateY(-3px) !important; }
body.help-page .tip-row:nth-child(4n+2):hover { transform: rotate(0.9deg) translateY(-3px) !important; }
body.help-page .tip-row:nth-child(4n+3):hover { transform: rotate(-0.6deg) translateY(-3px) !important; }
body.help-page .tip-row:nth-child(4n):hover { transform: rotate(1.2deg) translateY(-3px) !important; }
body.help-page .tip-row.reverse .tip-text { order: 2; }
body.help-page .tip-row.reverse .tip-media { order: 1; }

body.help-page .tip-eyebrow {
  display: inline-block !important;
  color: var(--ink, #2a1f3d) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}

body.help-page .tip-text h3,
body.help-page .tip-text h3 em {
  color: var(--ink, #2a1f3d) !important;
  font-style: normal !important;
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  line-height: 1.1 !important;
  margin: 0 0 14px !important;
}

body.help-page .tip-text ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--ink, #2a1f3d) !important;
}
body.help-page .tip-text p {
  font-family: 'Nunito', sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--ink, #2a1f3d) !important;
  margin: 0 !important;
}
body.help-page .tip-text li {
  padding: 4px 0 4px 22px !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: var(--ink, #2a1f3d) !important;
  position: relative !important;
  border-bottom: 0 !important;
}
body.help-page .tip-text li::before {
  content: "x" !important;
  font-family: 'Caveat', 'Bradley Hand', cursive !important;
  font-weight: 700 !important;
  transform: rotate(-6deg) !important;
  position: absolute !important;
  left: 0 !important;
  top: -2px !important;
  color: var(--ink, #2a1f3d) !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
}
body.help-page .tip-text li strong {
  color: var(--ink, #2a1f3d) !important;
  font-weight: 700 !important;
}

body.help-page .tip-text code {
  background: rgba(107, 74, 138, 0.08) !important;
  color: var(--plum, #6b4a8a) !important;
  font-family: 'Nunito', sans-serif !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  font-size: 0.92em !important;
}

/* ---------- Tip media (video preview) ---------- */

body.help-page .tip-media {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}
body.help-page .tip-media .hover-video-wrap {
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 10px 28px rgba(42, 31, 61, 0.18) !important;
  border: 1px solid rgba(107, 74, 138, 0.12) !important;
  position: relative !important;
  width: 100% !important;
  /* Intentionally NOT setting aspect-ratio on the wrapper — Safari does not
     reliably contribute wrapper aspect-ratio to grid row sizing, so the
     row collapses to text height and the video overflows. Putting the
     ratio on the <video> element (a replaced element) instead works
     correctly in Safari, matching the manishelf page pattern. */
}
/* Mirror the manishelf-page rule: ratio on the replaced element itself.
   Override the legacy style.css rule that sets max-height: 420px without
   binding the ratio. */
body.help-page .tip-media video,
body.help-page .tip-media .hover-video {
  width: 100% !important;
  display: block !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
}
body.help-page .tip-media > img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  max-height: none !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}
body.help-page .tip-media .hover-play-hint {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: rgba(42, 31, 61, 0.35) !important;
  color: var(--cream, #f3ecdd) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  backdrop-filter: blur(3px) !important;
  pointer-events: none !important;
  opacity: 0.92 !important;
  transition: opacity 0.2s ease !important;
}
body.help-page .tip-media .hover-video-wrap:hover .hover-play-hint {
  opacity: 0 !important;
}

/* ---------- Mobile stack ---------- */

@media (max-width: 820px) {
  body.help-page .tip-row,
  body.help-page .tip-row.reverse {
    grid-template-columns: 1fr !important;
  }
  body.help-page .tip-row.reverse .tip-text,
  body.help-page .tip-row.reverse .tip-media {
    order: 0;
  }
}

/* ============================================================
   DARK MODE
   ============================================================ */

@media (prefers-color-scheme: dark) {
  /* Dark-mode background — every stop sits at the same near-black
     lightness as the header (#0f0718, ~6% L). Only the HUE drifts
     slightly along the gradient (plum → indigo → cool plum) to add
     subtle interest without ever becoming brighter or hurting the eyes.
     A faint fractal-noise grain breaks up the flatness. */
  body.help-page {
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.78  0 0 0 0 0.95  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
      linear-gradient(to bottom,
        #0a0a20 0%,
        #0a0a20 25%,
        #0c091c 55%,
        #0e081a 80%,
        #0f0718 100%) !important;
    background-size: 240px 240px, auto !important;
    background-repeat: repeat, no-repeat !important;
    background-attachment: scroll !important;
  }

  body.help-page .help-hero {
    border-bottom: 0 !important;
  }
  body.help-page .help-hero-title { color: var(--ink, #f3ecdd) !important; }
  body.help-page .help-hero-title em { color: var(--ember, #e89878) !important; }
  body.help-page .help-hero-sub { color: var(--ink-soft, #d8c9ec) !important; }

  body.help-page .mani-section-rule .rule-num { color: var(--ember, #e89878) !important; }
  body.help-page .mani-section-rule .rule-label { color: var(--ink-soft, #d8c9ec) !important; }
  body.help-page .mani-section-rule .rule-line {
    background-image: linear-gradient(to right, rgba(201, 184, 221, 0.35) 40%, transparent 40%) !important;
  }

  body.help-page .tip-eyebrow { color: var(--ember, #e89878) !important; }

  body.help-page .tip-text h3,
  body.help-page .tip-text h3 em { color: var(--ink, #f3ecdd) !important; }
  body.help-page .tip-text li,
  body.help-page .tip-text ul { color: var(--ink, #f3ecdd) !important; }
  body.help-page .tip-text li::before { color: var(--ember, #e89878) !important; }
  body.help-page .tip-text li strong { color: var(--ember, #e89878) !important; }
  body.help-page .tip-text li { border-bottom-color: rgba(201, 184, 221, 0.14) !important; }
  body.help-page .tip-text code {
    background: rgba(201, 184, 221, 0.10) !important;
    color: var(--plum-dusk, #a98ec9) !important;
  }
  body.help-page .tip-media .hover-video-wrap {
    border-color: rgba(201, 184, 221, 0.14) !important;
    box-shadow:
      0 1px 0 rgba(201, 184, 221, 0.06) inset,
      0 10px 28px rgba(0, 0, 0, 0.55) !important;
  }

  /* Sticky-note tip rows in dark mode - deep jewel tones, matching manishelf page */
  body.help-page .tip-row:nth-child(4n+1) { background: #7d5f2a !important; }
  body.help-page .tip-row:nth-child(4n+2) { background: #72442a !important; }
  body.help-page .tip-row:nth-child(4n+3) { background: #4e3972 !important; }
  body.help-page .tip-row:nth-child(4n)   { background: #2f5a42 !important; }

  body.help-page .tip-row {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.12) inset,
      0 2px 2px -2px rgba(0, 0, 0, 0.4),
      0 22px 22px -14px rgba(0, 0, 0, 0.6),
      0 38px 32px -22px rgba(0, 0, 0, 0.5) !important;
  }

  /* Strengthen the peeled-bottom cast shadow so it reads against the dark background, matching the manishelf page. */
  body.help-page .tip-row::after {
    background: radial-gradient(ellipse at center top,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.28) 40%,
      transparent 75%) !important;
  }

  /* Dark-mode adhesive strips - darker shade of each jewel tone */
  body.help-page .tip-row:nth-child(4n+1)::before {
    background: linear-gradient(to bottom, #5d441c, rgba(93, 68, 28, 0)) !important;
  }
  body.help-page .tip-row:nth-child(4n+2)::before {
    background: linear-gradient(to bottom, #55301d, rgba(85, 48, 29, 0)) !important;
  }
  body.help-page .tip-row:nth-child(4n+3)::before {
    background: linear-gradient(to bottom, #372855, rgba(55, 40, 85, 0)) !important;
  }
  body.help-page .tip-row:nth-child(4n)::before {
    background: linear-gradient(to bottom, #1f4130, rgba(31, 65, 48, 0)) !important;
  }

  /* On dark jewel stickies, force cream text so it reads like ink on colored paper */
  body.help-page .tip-text h3,
  body.help-page .tip-text h3 em { color: #fef3d9 !important; }
  body.help-page .tip-text p,
  body.help-page .tip-text ul,
  body.help-page .tip-text li,
  body.help-page .tip-text li strong { color: #f0e4cf !important; }
  body.help-page .tip-eyebrow { color: #f0e4cf !important; opacity: 0.85; }
  body.help-page .tip-text li::before { color: #fcd76a !important; }
  body.help-page .tip-text code {
    background: rgba(0, 0, 0, 0.22) !important;
    color: #fef3d9 !important;
  }
}