/* ==========================================================================
   Run-It app shell: header, logo box, profile ring, mobile menu, footer.
   Loaded render-blocking on every app page, after the shared stylesheets.
   Motion and type come from the SPEC tokens in ui-foundation.css; every
   var() carries a fallback so the shell also paints right on its own.
   ========================================================================== */

/* Alpine hides these until it starts; ui-foundation.css has the same rule. */
[x-cloak] { display: none !important; }

/* --------------------------------------------------------------------------
   Header: animate only compositor-friendly properties, each one named.
   -------------------------------------------------------------------------- */
body > header.ri-app-header {
  transition-property: transform, background-color, box-shadow;
  transition-duration: 300ms;
  transition-timing-function: var(--ri-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}

/* --------------------------------------------------------------------------
   Logo: one fixed box for every plan, so the header never changes height.
   The Pro artwork fills the box; the Basic artwork (more of its canvas is
   the mark itself) is padded down to the size it has always rendered at.
   -------------------------------------------------------------------------- */
body > header a.ri-header-logo {
  position: relative;
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}
body > header .ri-header-logo-img,
body > header .ri-header-logo-ghost {
  display: block;
  box-sizing: border-box;
  width: 210px;
  height: 70px;
  max-width: none;
  object-fit: contain;
  object-position: left center;
}
body > header .ri-header-logo-img[data-ri-logo-tier="free"],
body > header .ri-header-logo-ghost[data-ri-logo-tier="free"] {
  padding: 9px 90px 9px 0;
}
body > header .ri-header-logo-ghost {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
@media (max-width: 1023px) {
  body > header .ri-header-logo-img,
  body > header .ri-header-logo-ghost {
    width: 168px;
    height: 56px;
    margin-left: -27px;
    margin-top: -7px;
  }
  body > header .ri-header-logo-img[data-ri-logo-tier="free"],
  body > header .ri-header-logo-ghost[data-ri-logo-tier="free"] {
    padding: 2px 21px 2px 27px;
  }
}
/* A Pro-only logo elsewhere on the page (outside the header) stays hidden
   for Basic accounts, and while the plan is unknown, until it is swapped. */
html[data-run-it-header-logo="free"] img[data-run-it-membership-logo="pro"]:not(.ri-header-logo-img),
html[data-run-it-header-logo="pending"] img[data-run-it-membership-logo="pro"]:not(.ri-header-logo-img) {
  opacity: 0 !important;
}

/* --------------------------------------------------------------------------
   Menu button: static markup is the closed state (three bars). Alpine only
   flips aria-expanded; the icon morph is transform-only.
   -------------------------------------------------------------------------- */
body > header .ri-menu-button {
  position: relative;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* 44 x 44 hit area around the 22 px icon. */
body > header .ri-menu-button::before {
  content: '';
  position: absolute;
  inset: -11px;
}
body > header .ri-menu-button:focus-visible {
  outline: 2px solid rgba(46, 209, 244, 0.85);
  outline-offset: 6px;
  border-radius: 4px;
}
.ri-burger,
.ri-burger-bars,
.ri-burger-cross {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.ri-burger-bars > span,
.ri-burger-cross > span {
  position: absolute;
  display: block;
  border-radius: 2px;
  background: currentColor;
  transition: transform 160ms var(--ri-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
.ri-burger-bars > span {
  left: 0;
  width: 100%;
  height: 2px;
  transform-origin: 0 50%;
}
.ri-burger-bars > span:nth-child(1) { top: 4px; transition-delay: 120ms; }
.ri-burger-bars > span:nth-child(2) { top: 10px; transition-delay: 160ms; }
.ri-burger-bars > span:nth-child(3) { top: 16px; transition-delay: 200ms; }
.ri-burger-cross { transform: rotate(45deg); }
.ri-burger-cross > span:nth-child(1) {
  left: 10px;
  top: 0;
  width: 2px;
  height: 100%;
  transform: scaleY(0);
  transform-origin: 50% 0;
}
.ri-burger-cross > span:nth-child(2) {
  left: 0;
  top: 10px;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.ri-menu-button[aria-expanded="true"] .ri-burger-bars > span { transform: scaleX(0); }
.ri-menu-button[aria-expanded="true"] .ri-burger-bars > span:nth-child(1) { transition-delay: 0ms; }
.ri-menu-button[aria-expanded="true"] .ri-burger-bars > span:nth-child(2) { transition-delay: 40ms; }
.ri-menu-button[aria-expanded="true"] .ri-burger-bars > span:nth-child(3) { transition-delay: 80ms; }
.ri-menu-button[aria-expanded="true"] .ri-burger-cross > span { transform: none; }
.ri-menu-button[aria-expanded="true"] .ri-burger-cross > span:nth-child(1) { transition-delay: 140ms; }
.ri-menu-button[aria-expanded="true"] .ri-burger-cross > span:nth-child(2) { transition-delay: 180ms; }

/* --------------------------------------------------------------------------
   Mobile menu panel and the dim backdrop behind it (SPEC menu pattern).
   -------------------------------------------------------------------------- */
body > header .ri-mobile-menu { transform-origin: 100% 0; }
.ri-menu-enter {
  transition:
    opacity var(--ri-dur-menu-in, 200ms) var(--ri-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    transform var(--ri-dur-menu-in, 200ms) var(--ri-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.ri-menu-leave {
  transition:
    opacity var(--ri-dur-menu-out, 140ms) var(--ri-ease-in, cubic-bezier(0.4, 0, 1, 1)),
    transform var(--ri-dur-menu-out, 140ms) var(--ri-ease-in, cubic-bezier(0.4, 0, 1, 1));
}
.ri-menu-from { opacity: 0; transform: translateY(-4px) scale(0.98); }
.ri-menu-to { opacity: 1; transform: none; }

.ri-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(3, 0, 20, 0.55);
  -webkit-tap-highlight-color: transparent;
}
.ri-backdrop-enter { transition: opacity 200ms var(--ri-ease-fade, cubic-bezier(0.25, 0.1, 0.25, 1)); }
.ri-backdrop-leave { transition: opacity 160ms var(--ri-ease-fade, cubic-bezier(0.25, 0.1, 0.25, 1)); }
.ri-backdrop-from { opacity: 0; }
.ri-backdrop-to { opacity: 1; }

/* One size for the menu links and Sign out on every page (the page-level
   `.text-base` overrides used to make them 14 px on some pages, 16 px on
   others). */
body > header .ri-mobile-menu .mobile-app-nav-link,
body > header .ri-mobile-menu #signOutMobile {
  font-size: var(--ri-text-body, 15px) !important;
  line-height: 1.5 !important;
}
@media (max-width: 640px) {
  body > header .ri-mobile-menu .mobile-app-nav-link,
  body > header .ri-mobile-menu #signOutMobile {
    font-size: var(--ri-text-body, 14px) !important;
  }
}

/* --------------------------------------------------------------------------
   1024-1179 px: the seven desktop tabs do not fit next to the logo and the
   ring, so this range uses the menu button (>= 1180 px is unchanged).
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1179.98px) {
  body > header .ri-desktop-nav,
  body > header .ri-desktop-actions { display: none !important; }
  body > header .ri-mobile-actions { display: flex !important; }
  body > header .ri-menu-button { display: block !important; }
}
@media (min-width: 1180px) {
  body > header .ri-mobile-menu,
  .ri-menu-backdrop { display: none !important; }
}

/* --------------------------------------------------------------------------
   Desktop nav and Sign out hovers: gradients cannot transition, so the hover
   fill is a layer that cross-fades, and each transition names its properties.
   The transitions start once the header is live. The Dashboard paints its
   header before its stylesheets arrive and keeps transitions off meanwhile
   (.dashboard-header-static); a transition then would fade every link from
   the browser's default link colour (blue, purple once visited) to white.
   -------------------------------------------------------------------------- */
body > header .nav__menu a.app-header-nav-link {
  isolation: isolate;
}
body > header:not(.dashboard-header-static) .nav__menu a.app-header-nav-link {
  transition-property: color, border-color, transform !important;
  transition-duration: 300ms !important;
  transition-timing-function: var(--ri-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)) !important;
}
body > header .nav__menu a.app-header-nav-link::before {
  /* One layer carries both the pill fill and its top highlight line (the
     Tailwind .nav-gradient::before line), so both fade together. */
  content: '';
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  translate: none;
  z-index: -1;
  border-radius: inherit;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 2.56%, rgba(255, 255, 255, 0.4) 51.48%, rgba(255, 255, 255, 0) 97.44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09) 10.51%, rgba(255, 255, 255, 0) 100%);
  background-size: 50% 1px, 100% 100%;
  background-position: 50% 0, 0 0;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ri-dur-fast, 150ms) var(--ri-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
body > header .nav__menu a.app-header-nav-link.nav-gradient { background-image: none !important; }
body > header .nav__menu a.app-header-nav-link.nav-gradient::before { opacity: 1; }
@media (hover: hover) {
  body > header .nav__menu a.app-header-nav-link.hover\:nav-gradient:hover { background-image: none !important; }
  body > header .nav__menu a.app-header-nav-link.hover\:nav-gradient:hover::before { opacity: 1; }
}
/* The underline grows with transform instead of animating width. */
body > header .nav__menu a.app-header-nav-link::after {
  width: 100% !important;
  transform: translateX(-50%) scaleX(0) !important;
}
body > header:not(.dashboard-header-static) .nav__menu a.app-header-nav-link::after {
  transition: transform 400ms var(--ri-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)) !important;
}
body > header .nav__menu a.app-header-nav-link:hover::after {
  transform: translateX(-50%) scaleX(1) !important;
}

body > header #signOut {
  transition: box-shadow var(--ri-dur-fast, 150ms) var(--ri-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
body > header #signOut::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(46, 209, 244, 0.12), rgba(46, 209, 244, 0.05));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ri-dur-fast, 150ms) var(--ri-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
body > header #signOut.button-border-gradient:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%) !important;
}
body > header #signOut:hover::after { opacity: 1; }

/* --------------------------------------------------------------------------
   Profile ring: the hidden placeholders in each page's header reserve its
   space. Its own styles (dropdown motion, type, hit area) are injected by
   js/profile-completion.js together with the markup they style, so a page
   that does not load this file yet still gets the same ring.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Footer: one size and a readable contrast on every page.
   -------------------------------------------------------------------------- */
footer .ri-app-footer-copy {
  font-size: var(--ri-text-label, 12px) !important;
  line-height: 1.5 !important;
  color: var(--ri-text-faint, rgba(255, 255, 255, 0.62)) !important;
}

/* --------------------------------------------------------------------------
   Reduced motion: instant or at most a 120 ms fade, never a slide.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body > header.ri-app-header { transition-duration: 0.01ms; }
  .ri-burger-bars > span,
  .ri-burger-cross > span {
    transition: opacity 100ms linear !important;
    transition-delay: 0ms !important;
  }
  .ri-burger-bars > span,
  .ri-burger-cross > span:nth-child(1),
  .ri-burger-cross > span:nth-child(2) { transform: none; }
  .ri-burger-cross > span { opacity: 0; }
  .ri-menu-button[aria-expanded="true"] .ri-burger-bars > span { transform: none; opacity: 0; }
  .ri-menu-button[aria-expanded="true"] .ri-burger-cross > span { opacity: 1; }
  .ri-menu-enter,
  .ri-menu-leave { transition: opacity 120ms linear !important; }
  .ri-menu-from { transform: none; }
  .ri-backdrop-enter,
  .ri-backdrop-leave { transition: opacity 120ms linear !important; }
  body > header .nav__menu a.app-header-nav-link,
  body > header .nav__menu a.app-header-nav-link::after,
  body > header .nav__menu a.app-header-nav-link::before,
  body > header #signOut,
  body > header #signOut::after { transition-duration: 0.01ms !important; }
}