/* ============================================================
   Nightnote — shared mobile optimisation layer
   Linked into every page's <helmet>. Targets the repeated
   inline-style patterns via attribute selectors so no per-element
   markup changes are needed. Real viewport media query — works on
   any phone / narrow window. Desktop (>760px) is untouched.
   ============================================================ */

/* base (all widths): auto burger + menu hidden until mobile shows them */
.nn-auto-burger { display: none; }
.nn-auto-menu { display: none; }

/* nav-bar logo sizing (headers only; footers keep their size) */
header .nn-wordmark,
.nn-header .nn-wordmark { height: 1.6em !important; }

/* ============================================================
   INSIDE-NIGHTNOTE FLIP CARDS
   Desktop: genuine 3D flip (inline transform + preserve-3d drive
   the rotation). Safari fails to cull the reverse face via
   backface-visibility, leaking a mirrored ghost — so we ALSO swap
   the two faces' opacity at the mid-point of the .55s rotation
   (~.28s delay, when the card is edge-on and invisible). Whichever
   face is mirrored is always at opacity 0, so no ghost ever shows.
   Mobile (<=760px) is forced static by the media query below.
   ============================================================ */
#inside .in3flip { cursor: pointer; }
/* Visibility of the two faces is driven ENTIRELY by opacity (the crossfade
   below), NOT by backface-visibility. Safari culls a face it judges
   "facing away" even after the net rotation brings it back to the viewer —
   that culling left flipped cards blank. Force both faces always-composited
   and let opacity decide which one you see. The rotation still animates for
   the flip feel; the back keeps its rotateY(180deg) so its text isn't mirrored. */
#inside .in3flip .in3inner > div { backface-visibility: visible !important; -webkit-backface-visibility: visible !important; }
#inside .in3flip .in3inner > div:not(.in3back) { transition: opacity .01s linear .18s; pointer-events: auto; }
#inside .in3flip .in3back { opacity: 0; transition: opacity .01s linear .18s; pointer-events: none; }
#inside .in3flip[data-flipped="true"] .in3inner > div:not(.in3back) { opacity: 0; pointer-events: none; }
#inside .in3flip[data-flipped="true"] .in3back { opacity: 1; pointer-events: auto; }
#inside .in3flip .in3back h3 { color: #2B2638; }
/* Front headlines: slightly smaller + uniform, with tighter side insets so
   the longest ("A reason to check in") sits on one line across all four. */
#inside .in3feel { font-size: 19px !important; left: 13px !important; right: 13px !important; }

/* The legacy static-card hover (.in3card:hover) paints a DARK gradient
   background and recolours text light — built for the old non-flip cards.
   On a flip card that dark panel shows through mid-rotation (Safari culls
   both faces briefly) and the light text washes out the back's dark copy
   on its cream face. Neutralise it for flip cards; each face keeps its
   own colours. Higher specificity + !important wins regardless of order. */
.in3card.in3flip:hover, .in3card.in3flip:focus-visible {
  background: none !important;
}
.in3card.in3flip:hover .in3feel, .in3card.in3flip:focus-visible .in3feel { color: #F7F1E6 !important; }
.in3card.in3flip:hover .in3back h3, .in3card.in3flip:focus-visible .in3back h3 { color: #2B2638 !important; }
.in3card.in3flip:hover .in3back p,  .in3card.in3flip:focus-visible .in3back p  { color: #7E7589 !important; }
.in3card.in3flip:hover .in3back svg g, .in3card.in3flip:focus-visible .in3back svg g { stroke: #6E6187 !important; }
.in3card.in3flip:hover .in3back svg circle[fill="#6E6187"], .in3card.in3flip:focus-visible .in3back svg circle[fill="#6E6187"],
.in3card.in3flip:hover .in3back svg g[fill="#6E6187"], .in3card.in3flip:focus-visible .in3back svg g[fill="#6E6187"] { fill: #6E6187 !important; }

/* ============================================================
   PHONE-COLUMN EDITING MODE
   When the editor / preview canvas is wider than a real phone but
   still in the mobile range (440–760px), render the whole app inside
   a centred 430px "phone" column on a dark backdrop. This lets you
   design against true phone proportions without a device frame.
   Real phones (< 440px) are unaffected and stay edge-to-edge.
   transform:translateZ(0) makes position:fixed bars (bottom nav,
   sticky headers) size to the column instead of the full canvas.
   ============================================================ */
@media (min-width: 440px) and (max-width: 760px) {
  html { background: #23202F !important; }
  body { background: transparent !important; overflow-x: hidden !important; }
  #dc-root {
    width: 430px !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    min-height: 100vh !important;
    transform: translateZ(0) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 30px 80px rgba(0,0,0,0.55) !important;
  }
}

@media (max-width: 760px) {

  /* desktop-only line break in §01 headline */
  .p1seen h2 br.desk-br { display: none !important; }

  /* §05 Nightlet render: fit within the column on mobile (no left bleed) */
  #bracelet-render { width: 100% !important; left: 0 !important; margin: 0 auto !important; }

  /* --- kill any horizontal overflow --- */
  html, body { max-width: 100% !important; overflow-x: hidden !important; }

  /* --- collapse multi-column grids to a single column by default --- */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* card grids (repeat 3/4/5) read better as a tidy 2-up than a long stack */
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"],
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"],
  [style*="repeat(5,1fr)"], [style*="repeat(5, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* footer categories stack one per row on mobile */
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* opt-in: grids that should fully stack (1-col) on mobile, not 2-up */
  [style*="grid-template-columns"].nn-stack-mobile { grid-template-columns: 1fr !important; }

  /* hero headlines/subheads that force a single line on desktop must wrap on mobile */
  h1[style*="nowrap"], h2[style*="nowrap"], p[style*="nowrap"] { white-space: normal !important; }

  /* ============ JOURNAL · attachment + save rows wrap on mobile ============ */
  .nn-attach-row { flex-wrap: wrap !important; padding: 14px 16px !important; }
  .nn-attach-row > div { flex-basis: 100% !important; }
  .nn-save-row { flex-wrap: wrap !important; align-items: flex-start !important; gap: 16px !important; }
  .nn-save-row > button { align-self: flex-start !important; }

  /* ============ DAILY CARD · responsive fan + stacked reveal ============ */
  .dc-stage { height: 640px !important; }
  .dc-stage[data-phase="pick"] { height: 460px !important; }
  .dc-stage[data-phase="done"] { height: auto !important; min-height: 0 !important; padding-bottom: 8px !important; }
  /* reveal: drawn card centered on top, reading + prompt flow beneath */
  .dc-stage[data-phase="done"] .dc-card { display: none !important; }
  .dc-stage[data-phase="done"] .dc-chosen {
    display: block !important;
    position: relative !important;
    left: auto !important; bottom: auto !important;
    margin: 0 auto -96px !important;
    transform: scale(0.66) !important;
    transform-origin: top center !important;
  }
  .dc-stage[data-phase="done"] .dc-reveal {
    position: static !important;
    left: auto !important; right: auto !important; top: auto !important;
    max-width: none !important;
    text-align: center !important;
    padding: 0 20px !important;
  }
  .dc-stage[data-phase="done"] .dc-reveal p { max-width: none !important; }
  .dc-stage[data-phase="done"] .dc-reveal > div[style*="background"] { text-align: left !important; }
  .dc-stage[data-phase="done"] .dc-redraw {
    position: static !important;
    left: auto !important; bottom: auto !important;
    transform: none !important;
    text-align: center !important;
    margin: 26px auto 8px !important;
  }

  /* --- trim the big horizontal section padding site-wide --- */
  section, header, footer, main { padding-left: 20px !important; padding-right: 20px !important; }

  /* generic inner content wrappers that hard-code side padding */
  [style*="padding: 88px 56px"], [style*="padding:88px 56px"],
  [style*="padding: 84px 56px"], [style*="padding:84px 56px"],
  [style*="padding: 64px 56px"], [style*="padding:64px 56px"],
  [style*="padding: 60px 56px"], [style*="padding:60px 56px"],
  [style*="padding:24px 72px 48px"], [style*="padding: 24px 72px 48px"] {
    padding-left: 20px !important; padding-right: 20px !important;
  }

  /* --- scale down the big Bodoni display type proportionally --- */
  h1[style] { font-size: clamp(30px, 8.5vw, 46px) !important; line-height: 1.06 !important; }
  h2[style] { font-size: clamp(25px, 7vw, 38px) !important;  line-height: 1.12 !important; }
  h3[style] { font-size: clamp(19px, 5.4vw, 26px) !important; }

  /* long constrained paragraphs / cols just go full width */
  [style*="max-width:360px"], [style*="max-width: 360px"],
  [style*="max-width:380px"], [style*="max-width: 380px"],
  [style*="max-width:420px"], [style*="max-width: 420px"],
  [style*="max-width:440px"], [style*="max-width: 440px"],
  [style*="max-width:470px"], [style*="max-width: 470px"] { max-width: 100% !important; }

  /* --- flex rows that split to opposite ends should wrap on phones --- */
  section [style*="justify-content:space-between"],
  section [style*="justify-content: space-between"] { flex-wrap: wrap !important; row-gap: 20px !important; }

  /* ============ shared marketing sticky header → burger ============ */
  header[style*="sticky"] {
    flex-wrap: nowrap !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  /* hide the inline nav + trailing CTA on marketing headers; burger replaces them */
  header.nn-hasburger nav { display: none !important; }
  header.nn-hasburger > a:not(:first-child) { display: none !important; }
  /* logged-in header: keep the profile/avatar pinned to the right */
  header.nn-loggedin-header { justify-content: space-between !important; }
  header.nn-loggedin-header nav { margin-left: auto !important; flex-wrap: nowrap !important; }

  /* body-level burger button (fixed, top-right, over the sticky header) */
  .nn-auto-burger {
    display: flex !important;
    position: fixed !important;
    top: 16px !important; right: 18px !important;
    z-index: 200 !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 44px !important; height: 44px !important;
    padding: 0 12px !important;
    background: none !important; border: none !important; cursor: pointer !important;
  }
  .nn-auto-burger span {
    display: block !important;
    height: 2px !important; width: 22px !important;
    background: #2B2A3F !important; border-radius: 2px !important;
    transition: transform .3s ease, opacity .2s ease !important;
  }
  .nn-auto-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  .nn-auto-burger.is-open span:nth-child(2) { opacity: 0 !important; }
  .nn-auto-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  /* slide-down menu panel */
  .nn-auto-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    position: fixed !important;
    top: 64px !important; left: 0 !important; right: 0 !important;
    z-index: 199 !important;
    background: #F3EDE1 !important;
    border-bottom: 1px solid rgba(43,38,56,0.08) !important;
    box-shadow: 0 18px 34px rgba(43,38,56,0.14) !important;
    padding: 0 20px !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: max-height .34s ease, opacity .24s ease, padding .34s ease !important;
  }
  .nn-auto-menu.is-open {
    max-height: 80vh !important;
    opacity: 1 !important;
    padding: 12px 20px 22px !important;
    pointer-events: auto !important;
  }
  .nn-auto-menu a {
    font-size: 16px !important; font-weight: 500 !important;
    color: #3A3447 !important; padding: 13px 4px !important;
    border-bottom: 1px solid rgba(43,38,56,0.06) !important;
  }
  .nn-auto-menu a.nn-auto-cta {
    margin-top: 14px !important;
    text-align: center !important;
    background: #221E33 !important; color: #F5EEE1 !important;
    border: none !important; border-radius: 999px !important;
    font-weight: 700 !important; letter-spacing: 0.1em !important;
    padding: 15px !important;
  }

  /* ============ landing header: burger menu ============ */
  .nn-header { position: relative !important; flex-wrap: nowrap !important; }
  .nn-header .nn-desktop-nav,
  .nn-header .nn-desktop-signin { display: none !important; }
  .nn-header .nn-burger { display: flex !important; margin-left: auto !important; }
  .nn-header .nn-burger-line { width: 24px !important; }

  /* slide-down panel */
  .nn-header .nn-mobile-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #F3EDE1 !important;
    border-bottom: 1px solid rgba(43,38,56,0.08) !important;
    box-shadow: 0 18px 34px rgba(43,38,56,0.14) !important;
    padding: 8px 24px 26px !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none !important;
    transition: max-height .34s ease, opacity .24s ease, padding .34s ease !important;
  }
  .nn-header .nn-nav-checkbox:checked ~ .nn-mobile-menu {
    max-height: 380px !important;
    opacity: 1 !important;
    padding-top: 14px !important;
    padding-bottom: 26px !important;
    pointer-events: auto !important;
  }
  /* burger → X */
  .nn-header .nn-nav-checkbox:checked ~ .nn-burger .nn-burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  .nn-header .nn-nav-checkbox:checked ~ .nn-burger .nn-burger-line:nth-child(2) { opacity: 0 !important; }
  .nn-header .nn-nav-checkbox:checked ~ .nn-burger .nn-burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }


  /* ============ logged-in app sidebar layouts ============ */
  [style*="grid-template-columns: 240px"], [style*="grid-template-columns:240px"],
  [style*="grid-template-columns: 260px"], [style*="grid-template-columns:260px"],
  [style*="grid-template-columns: 280px"], [style*="grid-template-columns:280px"] {
    grid-template-columns: 1fr !important;
  }

  /* ============ landing · 04 product demo (sphere + floating chat) ============ */
  /* the right pane is a fixed-height stage with absolutely-placed bubbles —
     shrink it and clip so nothing bleeds past the column edge */
  [style*="height:500px"], [style*="height: 500px"] {
    height: 340px !important; overflow: hidden !important;
  }
  /* the glowing sphere itself is 248px — bring it down a touch */
  [style*="width:248px"][style*="height:248px"] {
    width: 190px !important; height: 190px !important;
  }
  /* book carousel stage */
  [style*="height:470px"], [style*="height: 470px"] { height: 380px !important; }

  /* ============ Get-the-app phone mockups ============ */
  /* copy stacks on top; a single large phone sits below, bleeding off the
     bottom edge (clipped by the stage) — matching the landing treatment */
  .gta-main { padding: 20px 24px 32px !important; }
  .gta-phones {
    min-height: 0 !important; height: 380px !important;
    transform: none !important; overflow: hidden !important;
    margin-top: 20px !important;
  }
  .gta-phone-b {
    left: 50% !important; right: auto !important; top: 18px !important;
    width: 300px !important; transform: translateX(-50%) !important;
  }
  /* landing shows a single phone — hide the back chat phone here too */
  .gta-phone-a { display: none !important; }

  /* ============ BIRTH CHART · keep placement rows on one line ============ */
  /* name · sign · degree must stay aligned in one row, not stack */
  .bc-placement[style*="grid-template-columns"] { grid-template-columns: 1fr auto auto !important; }
  .bc-transit[style*="grid-template-columns"] { grid-template-columns: 1fr auto !important; }
  /* legacy fallback for any other 520-min stage */
  [style*="min-height:520px"]:not(.gta-phones) {
    transform: scale(0.52) !important;
    transform-origin: top center !important;
    height: 300px !important;
    min-height: 0 !important;
  }

  /* ============ HERO · zodiac wheel getting clipped in half ============ */
  /* ============ HERO · mobile overlap layout ============ */
  /* text + CTA stack normally; the testimonial floats ON TOP of the zodiac
     wheel, and the sphere bleeds off the section bottom into the next band. */
  section.hero-sec {
    border-radius: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }
  section [style*="inset:-14%"], section [style*="inset: -14%"] { inset: 0 !important; }
  /* testimonial sits above the wheel */
  .hero-testi {
    position: relative !important;
    z-index: 3 !important;
    margin-top: 18px !important;
  }
  /* wheel + sphere become a backdrop: pulled up so its top tucks just under
     the testimonial, enlarged, with the sphere (its centre) landing on the
     section's bottom edge so its lower half is clipped into the next band. */
  /* mobile-only: wheel + sphere raised together to tuck under the testimonial */
  .hero-orb img.wheelSpin { top: calc(50% - 115px) !important; }
  .hero-orb .hero-hub { top: calc(50% - 115px) !important; }

  /* ============ 03 INSIDE NIGHTNOTE · 3 feature cards ============ */
  /* keep the trio as compact stacked rows (one per row, not big like the
     Night-Sky panel below) — icon + number left, copy right */
  #inside [style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Inside-Nightnote feature cards: full single-column stack (not a cramped 2-up) */
  #inside [style*="repeat(4,1fr)"], #inside [style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* hover hint is desktop-only — cards are static (no hover) on mobile */
  .in3hoverhint { display: none !important; }
  /* Mobile: tap-to-expand accordion (no flip, no overlay). The front image +
     headline stays visible; tapping slides the detail panel open beneath it.
     Chevron (top-right) rotates down→up; single card open at a time (enforced
     in JS). Detail copy stays in the DOM for screen-readers/crawlers. */
  #inside .in3flip {
    display: block !important;
    padding: 0 !important;
    height: auto !important;
    perspective: none !important;
    cursor: pointer !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(43,38,56,0.10) !important;
  }
  #inside .in3inner {
    transform: none !important;
    transform-style: flat !important;
    position: static !important;
    height: auto !important;
    transition: none !important;
  }
  /* front face = image card, always visible; corners are clipped by the
     rounded .in3flip shell so the image + panel read as one connected card */
  #inside .in3inner > div:not(.in3back) {
    display: block !important;
    position: relative !important;
    height: 190px !important;
    opacity: 1 !important;
    pointer-events: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  /* swap the "+" badge for the chevron affordance */
  #inside .in3plus { display: none !important; }
  #inside .in3chev { display: flex !important; }
  #inside .in3flip[aria-expanded="true"] .in3chev svg { transform: rotate(180deg) !important; }
  /* detail panel: collapsed by default, slides open flush beneath the image
     (no gap, no separate shadow — one connected card) */
  #inside .in3back {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    max-height: 0 !important;
    margin-top: 0 !important;
    padding: 0 22px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: max-height .3s ease, padding .3s ease !important;
  }
  #inside .in3flip[aria-expanded="true"] .in3back {
    max-height: 340px !important;
    padding: 22px 22px 24px !important;
  }
  #inside .in3back svg { display: block !important; width: 44px !important; height: 34px !important; margin: 0 0 14px !important; opacity: 1 !important; }
  #inside .in3back h3 { font-size: 21px !important; margin-bottom: 8px !important; color: #2B2638 !important; }
  #inside .in3back p  { font-size: 14px !important; line-height: 1.55 !important; }
  #inside .in3backbtn { display: none !important; }
  /* §04 Night-Sky panel: compact to match the 01–03 card dimensions */
  .in3sky {
    padding: 20px 20px !important;
    margin-top: 12px !important;
    gap: 6px !important;
    text-align: center !important;
  }
  .in3sky h3 { font-size: 21px !important; margin-bottom: 8px !important; }
  .in3sky p  { font-size: 12.5px !important; line-height: 1.5 !important; max-width: none !important; margin-bottom: 4px !important; }
  .in3sky svg { height: 96px !important; }
  .in3sky [style*="justify-content: center"] { margin-top: 2px !important; }

  /* ============ 06 TESTIMONIALS · user spotlight ============ */
  /* stack the avatar over the quote, centered, and tame the huge serif */
  [style*="gap: 44px"][style*="border-radius: 24px"] {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    gap: 22px !important;
    padding: 32px 24px !important;
  }
  [style*="gap: 44px"][style*="border-radius: 24px"] #tst-spotlight {
    width: 96px !important; height: 96px !important;
  }
  [style*="gap: 44px"][style*="border-radius: 24px"] p {
    font-size: 22px !important; line-height: 1.3 !important;
  }
  [style*="gap: 44px"][style*="border-radius: 24px"] [style*="gap: 14px"] {
    justify-content: center !important;
  }

  /* the three smaller testimonials become a swipeable row, not a stack */
  [style*="repeat(3, 1fr)"][style*="margin-top: 20px"] {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 14px !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  [style*="repeat(3, 1fr)"][style*="margin-top: 20px"] > div {
    flex: 0 0 80% !important;
    scroll-snap-align: center !important;
  }

  /* ============ GET THE APP · phones overlapping the copy ============ */
  /* drop the phone stage out of absolute-position and into normal flow,
     centered, below the copy + store buttons so nothing overlaps */
  [style*="bottom: -120px"] {
    position: relative !important;
    top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
    width: 260px !important;
    height: 330px !important;
    margin: 18px auto -10px !important;
    transform: scale(0.9) !important;
    transform-origin: top center !important;
  }
  [style*="padding: 72px 56px"] {
    padding: 40px 22px !important;
  }

  /* ============ FOOTER · brand full-width, links tidy 2-up ============ */
  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px 20px !important;
  }
  footer [style*="grid-template-columns"] > div:first-child {
    grid-column: 1 / -1 !important;
  }
  footer [style*="height: 86px"] { height: 60px !important; }
}

/* extra squeeze for small phones */
@media (max-width: 420px) {
  header[style*="sticky"] nav { gap: 16px !important; }
  header[style*="sticky"] nav a { font-size: 12px !important; }
  /* single column for the very smallest screens on the big card grids */
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"],
  [style*="repeat(5,1fr)"], [style*="repeat(5, 1fr)"] { grid-template-columns: 1fr !important; }
}