/* ============================================================
   Upline Pro — Shared interactive enhancements
   Flip boxes · parallax · scroll reveals · mobile polish
   Load AFTER the page's own <style> block.
   ============================================================ */

/* ===== MOBILE GLOBAL POLISH ===== */
html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: contain; }
@media (max-width: 640px) {
  .container, .container-narrow { padding-left: 20px; padding-right: 20px; }
  .btn { min-height: 44px; }   /* Apple HIG touch target */
  .btn-lg { min-height: 50px; padding: 14px 22px; font-size: 15px; }
  .nav-cta .btn { padding: 10px 16px; font-size: 13px; }
  /* hide secondary nav CTAs on tiny screens */
  .nav-cta .lang-pill, .nav-cta .btn-ghost { display: none !important; }
  /* make all clickable items get a sensible tap-target */
  a[role="button"], button, .res-card, .cat-tile, .feat-card { min-height: 44px; }
}

/* keep hover-only effects off touch devices to avoid sticky hover state */
@media (hover: none) {
  .cat-tile:hover, .feat-card:hover, .res-card:hover, .pillar:hover { transform: none; }
}

/* iOS safe-area for sticky bars */
nav.main, .progress-strip, .filter-bar {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* prevent horizontal scroll caused by oversize hero text on very small screens */
@media (max-width: 380px) {
  .display-1 { font-size: clamp(34px, 9vw, 48px) !important; }
  .display-2 { font-size: clamp(26px, 7vw, 36px) !important; }
}

/* ===== FLIP BOX ===== */
.flip-box {
  perspective: 1000px;
  -webkit-perspective: 1000px;
  position: relative;
  cursor: pointer;
  outline: none;
}
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(.2, .8, .2, 1);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.flip-box.flipped .flip-box-inner,
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
/* only hover-flip on devices that actually support hover */
@media (hover: none) {
  .flip-box:hover .flip-box-inner { transform: none; }
  .flip-box.flipped .flip-box-inner { transform: rotateY(180deg); }
}

.flip-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  border-radius: inherit;
  padding: 24px 22px;
  overflow: hidden;
}
.flip-front { z-index: 2; }
.flip-back  {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.flip-tap-hint {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.30);
  color: #fff;
  display: grid; place-items: center;
  opacity: 0.6;
  pointer-events: none;
  transition: opacity .25s, transform .4s;
}
.flip-box:hover .flip-tap-hint { opacity: 0; transform: rotate(180deg); }
.flip-box.flipped .flip-tap-hint { opacity: 0; }
.flip-tap-hint svg { width: 14px; height: 14px; }

/* light flip variant for white-front cards */
.flip-tap-hint.dark {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.12);
  color: var(--ink-soft);
}

/* keyboard focus ring */
.flip-box:focus-visible {
  box-shadow: 0 0 0 3px rgba(26, 76, 255, 0.40);
  border-radius: inherit;
}

/* ===== PARALLAX ===== */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
  transform: translate3d(0, var(--py, 0px), 0);
}
@media (prefers-reduced-motion: reduce) {
  .parallax-layer { transform: none !important; transition: none !important; }
}

/* ===== SCROLL REVEAL (enhancement of .reveal) ===== */
.reveal-up    { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal-left  { opacity: 0; transform: translateX(-28px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal-right { opacity: 0; transform: translateX(28px);  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal-zoom  { opacity: 0; transform: scale(0.94);       transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal-up.in, .reveal-left.in, .reveal-right.in, .reveal-zoom.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-left, .reveal-right, .reveal-zoom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===== TILT CARDS (light pointer tilt) ===== */
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .tilt { transform: none !important; }
}

/* ===== Phase 15: accessibility pass (NS-003 / WCAG 2.1 AA) — applies wherever this stylesheet is loaded ===== */
/* --ink-faint (#86868B) was 3.5:1 on white and is used for 12–13px text everywhere; #6E6E73 is 4.7:1. html:root beats each page's inline :root. */
html:root{ --ink-faint:#6E6E73; }
/* visible focus for every interactive control, keyboard only */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline:3px solid var(--blue,#1A4CFF); outline-offset:2px; border-radius:6px; }
/* touch targets: buttons and pill controls never shorter than 44px on touch devices */
@media (hover: none){ .btn, .jn-btn, .ld-act, .lm-ai-btn, .au-done, .co-mode, .co-starter, .rc-privacy label, .dp-win-sel button{ min-height:44px; } }
/* reduced motion: no reveal / tilt / smooth-scroll for people who asked for it */
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .reveal{ transition:none !important; transform:none !important; opacity:1 !important; } *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }
/* the field tab bar reserves space at the bottom so nothing hides under it */
.ld-toast, .rc-toast{ bottom:calc(84px + env(safe-area-inset-bottom)); } @media (min-width:981px){ .ld-toast, .rc-toast{ bottom:20px; } }
/* mobile layout viewport: the desktop link row must be hidden by CSS (not only by the hamburger script) — otherwise Chrome sizes the
   layout viewport to the unwrapped nav (members.html measured 704px on a 390px phone) and every member page renders zoomed out */
@media (max-width:980px){ nav.main .nav-links{ display:none !important; } nav.main .nav-inner{ min-width:0; } nav.main .nav-cta{ min-width:0; flex-shrink:1; } html, body{ max-width:100%; overflow-x:hidden; } }
@media (max-width:980px){ .upp-lang-wrap:not(.open) .upp-lang-menu{ display:none; } .upp-lang-menu{ right:0; max-width:calc(100vw - 24px); } }
@media (max-width:980px){ .nav-right{ flex-wrap:wrap; min-width:0; } .nav-right .social-links{ display:none; } }

/* Accessible text-only variants of the brand accents (WCAG 1.4.3: >=4.5:1 on white).
   The originals stay in use for fills and borders, where they pass. */
html:root{--mint-text:#3C7A6B;--gold-text:#966618;}

/* ============================================================
   DAILY PACE (Phase 16) — the Daily Five is the practice,
   the number is the member's pace. assets/pace.js
   ============================================================ */
.td-pace{font-weight:500;color:var(--ink-mute,#6E6E73);font-size:.9em}
.td-pace-btn{
  appearance:none;background:none;border:0;padding:4px 0;margin-top:2px;
  font:inherit;font-size:12px;font-weight:600;letter-spacing:.01em;
  color:var(--blue,#1a4cff);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
}
.td-pace-btn:hover{text-decoration-thickness:2px}
.td-pace-box{margin:14px 0 4px}

.pace-picker{
  border:1px solid var(--line,#D2D2D7);border-radius:12px;
  padding:16px;background:var(--bg-alt,#F5F5F7);
}
.pace-lead{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--ink-soft,#3A3A3C)}
.pace-foot{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-mute,#6E6E73)}
.pace-foot em{font-style:normal;font-weight:600}

.pace-opt{
  display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;
  background:#fff;border:1px solid var(--line,#D2D2D7);border-radius:10px;
  padding:12px 14px;margin-bottom:8px;cursor:pointer;font:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pace-opt:last-of-type{margin-bottom:0}
.pace-opt:hover{border-color:var(--blue,#1a4cff)}
.pace-opt.is-on{border-color:var(--blue,#1a4cff);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue,#1a4cff) 22%,transparent)}
.pace-n{
  flex:0 0 auto;min-width:38px;height:38px;border-radius:9px;
  display:grid;place-items:center;font-size:17px;font-weight:700;
  background:var(--bg-alt,#F5F5F7);color:var(--ink,#1D1D1F);
  font-variant-numeric:tabular-nums;
}
.pace-opt.is-on .pace-n{background:var(--blue,#1a4cff);color:#fff}
.pace-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.pace-meta b{font-size:14px;font-weight:600;color:var(--ink,#1D1D1F)}
.pace-meta small{font-size:12px;color:var(--ink-mute,#6E6E73)}
.pace-meta em{font-style:normal;font-size:12.5px;line-height:1.45;color:var(--ink-soft,#3A3A3C);margin-top:3px}

@media (hover:none){ .pace-opt{min-height:44px} .td-pace-btn{min-height:44px} }
@media (max-width:420px){ .pace-opt{gap:10px;padding:11px 12px} .pace-meta em{display:none} }

/* ============================================================
   LEADER BRIEF (Phase 16) — the queue says who and why;
   these say what to open with. assets/leader.js
   ============================================================ */
blockquote.ld-context{
  margin:0 0 12px;padding:10px 14px;
  border-left:3px solid var(--mint,#9DD5C8);
  background:var(--bg-alt,#F5F5F7);border-radius:0 8px 8px 0;
  font-size:13.5px;line-height:1.55;color:var(--ink-soft,#3A3A3C);
}
.ld-openers{margin:12px 0 4px}
.ld-openers > b{
  display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--ink-mute,#6E6E73);
}
.ld-openers-note{margin:3px 0 9px;font-size:12px;color:var(--ink-mute,#6E6E73);line-height:1.45}
.ld-openers ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.ld-openers li{
  display:flex;gap:10px;align-items:flex-start;
  background:#fff;border:1px solid var(--line-soft,#E8E8ED);border-radius:9px;padding:10px 11px;
}
.ld-openers li > span{flex:1 1 auto;font-size:13.5px;line-height:1.5;color:var(--ink,#1D1D1F)}
.ld-copy{
  flex:0 0 auto;appearance:none;border:1px solid var(--line,#D2D2D7);background:var(--bg-alt,#F5F5F7);
  border-radius:7px;padding:5px 11px;font:inherit;font-size:12px;font-weight:600;
  color:var(--ink-soft,#3A3A3C);cursor:pointer;min-height:32px;
}
.ld-copy:hover{border-color:var(--blue,#1a4cff);color:var(--blue,#1a4cff)}
.ld-copy.is-copied{background:var(--mint-tint,#EAF6F2);border-color:var(--mint,#9DD5C8);color:var(--mint-text,#3C7A6B)}
@media (hover:none){ .ld-copy{min-height:44px;padding:5px 14px} }
@media (max-width:420px){ .ld-openers li{flex-direction:column;gap:8px} .ld-copy{align-self:flex-start} }
/* the ramp option shows "3→5", which needs more room than a single digit */
.pace-n-ramp{font-size:13px;letter-spacing:-.02em;padding:0 6px;min-width:52px}