/* Drawer rows come in two element kinds: <a> for anything that navigates (the
   tenant's own links, Clear & log out) and <button> for anything that acts
   locally (Who is this?). The shop styled the base look for both but the
   layout and hover rules for buttons only, so the tenant's links landed in the
   drawer unpositioned. Both are named everywhere now. */
/* Global splash chrome — italic rabIT wordmark is the hamburger.
   Default: top-CENTER (os2 / os home chrome). Page-scoped .rabit-corner--right
   pins the mark top-RIGHT on Repair gate, bench, shop-notes, journal #home.
   Destinations drop as a column (translateY) except shop-notes
   (data-rabit-menu=row-split): closed TR on tile gutter; open = centered
   logo with 2 items each side spreading outward. Thin underglow flashes
   under each word. DOM is corner.insertBefore(nav, btn); open grid places
   the mark in the middle column. */

.rabit-corner {
  position: fixed;
  top: max(8px, env(safe-area-inset-top, 0px));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 1090;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  overflow: visible;
}

/* Repair / bench / notes / journal — clear center logos & gates. */
.rabit-corner.rabit-corner--right {
  left: auto;
  right: max(12px, env(safe-area-inset-right, 0px));
  transform: none;
  align-items: flex-end;
}

/* Stay above the frost pane; chips reclaim the top-right. */
body:has(.landing-tools) .rabit-corner {
  top: 16px;
}

button.rabit-menu-btn,
.rabit-menu-btn {
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 6px 2px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: auto;
  filter: none !important;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  line-height: 0;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  order: -1;
}
.rabit-menu-btn img {
  display: block;
  height: 26px;
  width: auto;
  background: transparent;
}
.rabit-menu-btn:hover img,
.rabit-menu-btn:focus-visible img { opacity: 0.82; }
.rabit-menu-btn:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.28);
  outline-offset: 4px;
}
.rabit-menu-btn[aria-expanded="true"] img { opacity: 1; }

/* Subtle frost over the page; menu + wordmark sit above this pane. */
.rabit-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1070;
  background: rgba(8, 8, 10, 0.07);
  backdrop-filter: blur(4px) saturate(1.12);
  -webkit-backdrop-filter: blur(4px) saturate(1.12);
  opacity: 0;
  transition: opacity 0.32s ease;
  pointer-events: none;
}
.rabit-menu-backdrop[hidden] { display: none !important; }
body.rabit-nav-open .rabit-menu-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.rabit-menu {
  position: relative;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 36px;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 4px 0 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
  overflow: visible;
}
.rabit-corner--right .rabit-menu {
  align-items: flex-end;
}
.rabit-menu[hidden] { display: none !important; }

.rabit-menu > * {
  position: relative;
  opacity: 0;
  pointer-events: auto;
  align-self: center;
  flex: 0 0 auto;
  overflow: visible;
}
.rabit-corner--right .rabit-menu > * {
  align-self: flex-end;
}

.rabit-menu a,
.rabit-menu :is(a, button).rv-page {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  margin: 0;
  min-height: 0;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: isolate;
  filter: none;
  cursor: pointer;
  color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 26px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-align: center;
  text-transform: lowercase;
  text-decoration: none;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}
.rabit-menu a.rv-page--who,
.rabit-menu :is(a, button).rv-page--who {
  text-transform: none;
}
.rabit-menu a.rv-page--who.is-current,
.rabit-menu :is(a, button).rv-page--who.is-current {
  color: var(--na-gold, #fcb612);
}
.rabit-menu a::after,
.rabit-menu :is(a, button).rv-page::after {
  content: "";
  position: absolute;
  left: 50%;
  right: auto;
  top: auto;
  bottom: 1px;
  width: 90%;
  height: 3px;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 100% at 50% 0%,
    rgba(255, 252, 240, 0.22) 0%,
    rgba(255, 248, 230, 0.08) 55%,
    transparent 100%
  );
  opacity: 0;
  transform: translateX(-50%);
}
.rabit-menu a:hover,
.rabit-menu a:focus-visible,
.rabit-menu :is(a, button).rv-page:hover,
.rabit-menu :is(a, button).rv-page:focus-visible {
  color: #fff;
  background: none;
  border: 0;
  box-shadow: none;
  filter: none;
}
.rabit-menu.is-open a:hover::after,
.rabit-menu.is-open a:focus-visible::after,
.rabit-menu.is-open :is(a, button).rv-page:hover::after,
.rabit-menu.is-open :is(a, button).rv-page:focus-visible::after {
  animation: none;
  opacity: 1;
}
.rabit-menu a:focus-visible,
.rabit-menu :is(a, button).rv-page:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.28);
  outline-offset: 4px;
}
.rabit-menu a[href="/bench.html"],

.rabit-corner--right .rabit-menu a,
.rabit-corner--right .rabit-menu :is(a, button).rv-page {
  text-align: right;
}

.rabit-menu a[href="/shop-notes.html"] {
  position: relative;
  padding-right: 12px;
}
.rabit-menu a[href="/shop-notes.html"] .rv-unread-dot {
  top: 0.12em;
  right: 0;
}

@keyframes rabit-menu-in {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes rabit-menu-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(24px);
  }
}
@keyframes rabit-menu-in-col {
  from {
    opacity: 0;
    transform: translateY(-28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes rabit-menu-out-col {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}
@keyframes rabit-spot-flash {
  0% { opacity: 0; }
  28% { opacity: 1; }
  52% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes rabit-spot-out {
  to { opacity: 0; }
}

.rabit-menu.is-open > * {
  animation: rabit-menu-in-col 0.32s linear both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.rabit-menu.is-open a::after,
.rabit-menu.is-open :is(a, button).rv-page::after {
  animation: rabit-spot-flash 0.72s linear both;
  /* Same stagger as the word, plus land time, plus an extra beat before the flash. */
  animation-delay: calc(var(--i, 0) * 55ms + 0.32s + 0.28s);
}

.rabit-menu.is-leaving > * {
  animation: rabit-menu-out-col 0.24s linear both;
  animation-delay: calc((var(--n, 1) - 1 - var(--i, 0)) * 55ms);
}
.rabit-menu.is-leaving a::after,
.rabit-menu.is-leaving :is(a, button).rv-page::after {
  animation: rabit-spot-out 0.22s linear forwards;
  animation-delay: calc((var(--n, 1) - 1 - var(--i, 0)) * 55ms);
}

/* index.html diagnostic workspace — splash chrome is landing-only. */
body:has(#landing-overlay):not(.show-landing) .rabit-corner,
body:has(#landing-overlay):not(.show-landing) .rabit-menu,
body:has(#landing-overlay):not(.show-landing) .rabit-menu-backdrop {
  display: none !important;
}

body.xr-running .rabit-corner,
body.xr-running .rabit-menu,
body.xr-running .rabit-menu-backdrop {
  display: none !important;
}

@media (max-width: 720px) {
  .rabit-corner { gap: 8px; }
  .rabit-menu { gap: 36px; }
  .rabit-menu-btn img { height: 22px; }
  .rabit-menu a,
  .rabit-menu :is(a, button).rv-page { font-size: 20px; }
}

/* JS sets data-rabit-menu="column" on splash pages. Default center; --right pins TR. */
body[data-rabit-menu="column"] .rabit-corner {
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
body[data-rabit-menu="column"] .rabit-corner.rabit-corner--right {
  align-items: flex-end;
}
body[data-rabit-menu="column"] .rabit-menu-btn {
  order: -1;
}
body[data-rabit-menu="column"] .rabit-menu {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 36px;
  max-width: none;
  width: auto;
  padding: 4px 0 0;
}
body[data-rabit-menu="column"] .rabit-corner--right .rabit-menu {
  align-items: flex-end;
}
body[data-rabit-menu="column"] .rabit-menu > * {
  align-self: center;
}
body[data-rabit-menu="column"] .rabit-corner--right .rabit-menu > * {
  align-self: flex-end;
}
body[data-rabit-menu="column"] .rabit-menu a,
body[data-rabit-menu="column"] .rabit-menu :is(a, button).rv-page {
  text-align: center;
}
body[data-rabit-menu="column"] .rabit-corner--right .rabit-menu a,
body[data-rabit-menu="column"] .rabit-corner--right .rabit-menu :is(a, button).rv-page {
  text-align: right;
}
body[data-rabit-menu="column"] .rabit-menu.is-open > * {
  animation-name: rabit-menu-in-col;
}
body[data-rabit-menu="column"] .rabit-menu.is-leaving > * {
  animation-name: rabit-menu-out-col;
}

@media (max-width: 720px) {
  body[data-rabit-menu="column"] .rabit-corner { gap: 8px; }
  body[data-rabit-menu="column"] .rabit-menu { gap: 36px; }
}


/* shop-notes: closed = TR on tile gutter; open = centered logo with
   horizontal split — 2 destinations each side, equal spread from the mark. */
body[data-rabit-menu="row-split"] .rabit-corner.rabit-corner--right {
  left: auto;
  right: calc(var(--sn-gutter, 12px) + env(safe-area-inset-right, 0px));
  transform: none;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}
body.rabit-nav-open[data-rabit-menu="row-split"] .rabit-corner.rabit-corner--right {
  left: calc(var(--sn-side, 12px) + env(safe-area-inset-left, 0px));
  right: calc(var(--sn-gutter, 12px) + env(safe-area-inset-right, 0px));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-content: stretch;
  align-items: center;
}
body[data-rabit-menu="row-split"] .rabit-menu-btn {
  order: 0;
  flex: 0 0 auto;
  grid-column: 2;
  grid-row: 1;
  z-index: 2;
  justify-self: center;
}
body[data-rabit-menu="row-split"] .rabit-menu {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  gap: 0;
  width: auto;
  max-width: none;
  min-width: 0;
  height: auto;
  padding: 0;
  /* Closed: park off-layout. Open: overlay full corner as 3-col grid. */
  position: absolute;
  inset: auto;
  opacity: 0;
  pointer-events: none;
}
body.rabit-nav-open[data-rabit-menu="row-split"] .rabit-menu,
body[data-rabit-menu="row-split"] .rabit-menu.is-leaving {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  opacity: 1;
  pointer-events: none;
}
body[data-rabit-menu="row-split"] .rabit-menu[hidden] {
  display: none !important;
}
body[data-rabit-menu="row-split"] .rabit-menu-slot {
  grid-column: 2;
  width: var(--rabit-mark-slot, 96px);
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
body[data-rabit-menu="row-split"] .rabit-menu-col {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  width: 100%;
  min-width: 0;
  opacity: 1;
  pointer-events: none;
  animation: none;
}
body[data-rabit-menu="row-split"] .rabit-menu-col--left {
  grid-column: 1;
  justify-content: flex-end;
  padding-right: clamp(28px, 4vw, 64px);
}
body[data-rabit-menu="row-split"] .rabit-menu-col--right {
  grid-column: 3;
  justify-content: flex-start;
  padding-left: clamp(28px, 4vw, 64px);
}
body[data-rabit-menu="row-split"] .rabit-menu-col > * {
  opacity: 0;
  pointer-events: auto;
  flex: 0 0 auto;
  align-self: center;
}
body[data-rabit-menu="row-split"] .rabit-menu a,
body[data-rabit-menu="row-split"] .rabit-menu :is(a, button).rv-page {
  text-align: center;
}
body[data-rabit-menu="row-split"] .rabit-menu.is-open > .rabit-menu-col,
body[data-rabit-menu="row-split"] .rabit-menu.is-leaving > .rabit-menu-col,
body[data-rabit-menu="row-split"] .rabit-menu.is-open > .rabit-menu-slot,
body[data-rabit-menu="row-split"] .rabit-menu.is-leaving > .rabit-menu-slot {
  animation: none;
  opacity: 1;
}
body[data-rabit-menu="row-split"] .rabit-menu.is-open .rabit-menu-col--left > * {
  animation: rabit-menu-in-left 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
body[data-rabit-menu="row-split"] .rabit-menu.is-open .rabit-menu-col--right > * {
  animation: rabit-menu-in-right 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
body[data-rabit-menu="row-split"] .rabit-menu.is-leaving .rabit-menu-col--left > * {
  animation: rabit-menu-out-left 0.24s linear both;
  animation-delay: calc((var(--n, 1) - 1 - var(--i, 0)) * 55ms);
}
body[data-rabit-menu="row-split"] .rabit-menu.is-leaving .rabit-menu-col--right > * {
  animation: rabit-menu-out-right 0.24s linear both;
  animation-delay: calc((var(--n, 1) - 1 - var(--i, 0)) * 55ms);
}
body[data-rabit-menu="row-split"] .rabit-menu.is-open .rabit-menu-col > *::after {
  animation: rabit-spot-flash 0.72s linear both;
  animation-delay: calc(var(--i, 0) * 55ms + 0.34s + 0.22s);
}

@keyframes rabit-menu-in-left {
  from {
    opacity: 0;
    transform: translateX(calc(22px + var(--i, 0) * 14px));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes rabit-menu-in-right {
  from {
    opacity: 0;
    transform: translateX(calc(-22px - var(--i, 0) * 14px));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes rabit-menu-out-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(calc(16px + var(--i, 0) * 10px));
  }
}
@keyframes rabit-menu-out-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(calc(-16px - var(--i, 0) * 10px));
  }
}

@media (max-width: 720px) {
  body[data-rabit-menu="row-split"] .rabit-menu a,
  body[data-rabit-menu="row-split"] .rabit-menu :is(a, button).rv-page {
    font-size: 18px;
  }
  body[data-rabit-menu="row-split"] .rabit-menu-col {
    gap: clamp(16px, 3vw, 28px);
  }
  body[data-rabit-menu="row-split"] .rabit-menu-col--left {
    padding-right: clamp(16px, 3vw, 32px);
  }
  body[data-rabit-menu="row-split"] .rabit-menu-col--right {
    padding-left: clamp(16px, 3vw, 32px);
  }
  body[data-rabit-menu="row-split"] .rabit-menu-slot {
    width: var(--rabit-mark-slot, 84px);
  }
}

/* legacy row alias — keep older cached pages from breaking */
body[data-rabit-menu="row"] .rabit-corner.rabit-corner--right {
  left: auto;
  right: calc(var(--sn-gutter, 12px) + env(safe-area-inset-right, 0px));
  transform: none;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
body.rabit-nav-open[data-rabit-menu="row"] .rabit-corner.rabit-corner--right {
  left: calc(var(--sn-side, 12px) + env(safe-area-inset-left, 0px));
}
body[data-rabit-menu="row"] .rabit-menu-btn {
  order: -1;
  flex: 0 0 auto;
}
body[data-rabit-menu="row"] .rabit-menu {
  flex: 1 1 auto;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-evenly;
  gap: 0;
  width: auto;
  max-width: none;
  min-width: 0;
  height: auto;
  padding: 0;
}
body[data-rabit-menu="row"] .rabit-menu > * {
  align-self: center;
}
body[data-rabit-menu="row"] .rabit-menu a,
body[data-rabit-menu="row"] .rabit-menu :is(a, button).rv-page {
  text-align: center;
}
body[data-rabit-menu="row"] .rabit-menu.is-open > * {
  animation-name: rabit-menu-in;
}
body[data-rabit-menu="row"] .rabit-menu.is-leaving > * {
  animation-name: rabit-menu-out;
}

/* bench.html only: two columns hanging from the bottom of the wordmark,
   left/right of the mark. The center gutter clears .landing-logo (128px)
   plus the stacked "rotten / vision" wallpaper lockup in .xr-hero. */
body[data-rabit-menu="split"] .rabit-corner {
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
body[data-rabit-menu="split"] .rabit-menu-btn {
  order: -1;
}
body[data-rabit-menu="split"] .rabit-menu {
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  /* Inner edges face the mark; vmin + px so the wallpaper logo stays clear. */
  gap: clamp(168px, 38vmin, 340px);
  max-width: none;
  width: auto;
  padding: 4px 0 0;
}
body[data-rabit-menu="split"] .rabit-menu > .rabit-menu-col {
  opacity: 1;
  pointer-events: none;
  align-self: flex-start;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: max-content;
  overflow: visible;
}
body[data-rabit-menu="split"] .rabit-menu.is-open > .rabit-menu-col,
body[data-rabit-menu="split"] .rabit-menu.is-leaving > .rabit-menu-col {
  animation: none;
}
body[data-rabit-menu="split"] .rabit-menu-col > * {
  opacity: 0;
  pointer-events: auto;
  align-self: auto;
  width: fit-content;
}
body[data-rabit-menu="split"] .rabit-menu-col--left {
  align-items: flex-end;
}
body[data-rabit-menu="split"] .rabit-menu-col--left a,
body[data-rabit-menu="split"] .rabit-menu-col--left :is(a, button).rv-page {
  text-align: right;
}
body[data-rabit-menu="split"] .rabit-menu-col--right {
  align-items: flex-start;
}
body[data-rabit-menu="split"] .rabit-menu-col--right a,
body[data-rabit-menu="split"] .rabit-menu-col--right :is(a, button).rv-page {
  text-align: left;
}
body[data-rabit-menu="split"] .rabit-menu.is-open .rabit-menu-col > * {
  animation: rabit-menu-in-col 0.32s linear both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
body[data-rabit-menu="split"] .rabit-menu.is-leaving .rabit-menu-col > * {
  animation: rabit-menu-out-col 0.24s linear both;
  animation-delay: calc((var(--n, 1) - 1 - var(--i, 0)) * 55ms);
}

@media (max-width: 720px) {
  body[data-rabit-menu="split"] .rabit-corner { gap: 8px; }
  body[data-rabit-menu="split"] .rabit-menu { gap: clamp(140px, 36vmin, 240px); }
  body[data-rabit-menu="split"] .rabit-menu-col { gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .rabit-menu.is-open > *,
  .rabit-menu.is-leaving > *,
  .rabit-menu.is-open .rabit-menu-col > *,
  .rabit-menu.is-leaving .rabit-menu-col > *,
  .rabit-menu.is-open a::after,
  .rabit-menu.is-open :is(a, button).rv-page::after,
  .rabit-menu.is-leaving a::after,
  .rabit-menu.is-leaving :is(a, button).rv-page::after {
    animation-duration: 0.01ms;
    animation-delay: 0s;
  }
}