/*
  Kurumi Clockwork v2 - global shell layer (Phase 5R / R1).
  Project-owned stylesheet served via /kurumi-static/.

  Scope: the new top masthead + mega-menu navigation system that replaces
  the Argon left sidenav as the primary navigation, the account popover,
  the mobile navigation drawer, and the shell-level
  layout rules that no longer reserve space for a sidebar.

  Layering (load order matters):
    1. argon-dashboard.css     (upstream component base, kept for forms/JS)
    2. kurumi-theme.css        (design tokens + shared Kurumi components)
    3. kurumi-dashboard.css    (Phase 5 compat layer for R4 page rewrites)
    4. kurumi-v2.css           (this file - the v2 shell wins ties)

  Nothing here changes server behavior: routes, permissions, CSRF posts,
  and the dynamic variables["sidenav"] data source are untouched.

  Motion policy: all transitions are gated behind
  prefers-reduced-motion: no-preference where they matter, and neutralized
  under prefers-reduced-motion: reduce. No scroll hijacking. Content never
  depends on animation completing.
*/

/* ==========================================================================
   Shell layout tokens (v2)
   ========================================================================== */

.kurumi {
  --kurumi-masthead-h: 64px;
  --kurumi-masthead-bg: rgba(7, 6, 11, 0.88);
  --kurumi-masthead-border: rgba(176, 142, 62, 0.22);
  --kurumi-panel-bg: rgba(17, 14, 18, 0.97);
  --kurumi-panel-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4);
  --kurumi-drawer-width: min(340px, 88vw);
  --kurumi-shell-gap: clamp(1rem, 3vw, 2.25rem);
}

/* ==========================================================================
   Skip link
   ========================================================================== */

.kurumi-skip {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1200;
  padding: 0.6rem 1.1rem;
  background: var(--kurumi-crimson-deep);
  color: var(--kurumi-ivory);
  border: 1px solid var(--kurumi-gold);
  border-radius: 8px;
  font-family: "Source Sans 3", "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  transform: translateY(-160%);
}

.kurumi-skip:focus-visible,
.kurumi-skip:focus {
  transform: translateY(0);
  outline: 2px solid var(--kurumi-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   Masthead
   ========================================================================== */

.kurumi-masthead {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--kurumi-masthead-bg);
  border-bottom: 1px solid var(--kurumi-masthead-border);
}

/* The masthead is only the sticky positioning context for its bar. Its
   backdrop-filter is applied to the bar (in the layout rule below), never
   to the masthead itself: a filter/backdrop-filter ancestor becomes the
   containing block for descendant position:fixed elements, which would trap
   the mobile drawer and its overlay inside the ~64px masthead box and clip
   them. The drawer/overlay are children of the masthead in the markup and
   must resolve against the viewport. */

/* Upstream argon scroll code toggles shadow-none on #navbarBlur; keep the
   visual edge stable regardless of those class flips. */
.kurumi-masthead.shadow-none,
.kurumi-masthead.bg-white {
  background: var(--kurumi-masthead-bg) !important;
  box-shadow: none;
}

.kurumi-masthead__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--kurumi-masthead-h);
  padding-inline: var(--kurumi-shell-gap);
  max-width: 1440px;
  margin-inline: auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Wordmark ---------------------------------------------------------------- */

.kurumi-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.25rem;
  text-decoration: none;
  flex: 0 0 auto;
}

.kurumi-wordmark__ring {
  width: 34px;
  height: 34px;
  opacity: 0.85;
  transition: transform 0.6s ease, opacity 0.3s ease;
}

.kurumi-wordmark__text {
  font-family: "Cormorant Garamond", "Playfair Display", "EB Garamond", "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--kurumi-ivory);
  line-height: 1;
  white-space: nowrap;
}

.kurumi-wordmark:hover .kurumi-wordmark__ring,
.kurumi-wordmark:focus-visible .kurumi-wordmark__ring {
  opacity: 1;
}

/* Mega menu triggers ------------------------------------------------------ */

.kurumi-megamenu-wrap {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.kurumi-megamenu {
  display: flex;
  align-items: stretch;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kurumi-megamenu__item {
  display: flex;
  align-items: stretch;
  position: relative;
}

.kurumi-megabtn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--kurumi-ivory-muted);
  font-family: "Source Sans 3", "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}

.kurumi-megabtn::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.28rem;
  height: 1px;
  background: var(--kurumi-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.kurumi-megabtn .kurumi-megabtn__chev {
  font-size: 0.62rem;
  opacity: 0.7;
  transition: transform 0.25s ease;
}

.kurumi-megabtn:hover,
.kurumi-megabtn:focus-visible,
.kurumi-megabtn[aria-expanded="true"] {
  color: var(--kurumi-ivory);
}

.kurumi-megabtn:hover::after,
.kurumi-megabtn:focus-visible::after,
.kurumi-megabtn[aria-expanded="true"]::after {
  transform: scaleX(1);
}

.kurumi-megabtn[aria-expanded="true"] .kurumi-megabtn__chev {
  transform: rotate(180deg);
}

/* Group carries an active route: gold dot before the label. */
.kurumi-megabtn.is-active-route {
  color: var(--kurumi-ivory);
}

.kurumi-megabtn.is-active-route .kurumi-megabtn__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--kurumi-gold);
  box-shadow: 0 0 6px rgba(176, 142, 62, 0.8);
  flex: 0 0 auto;
}

.kurumi-megabtn:not(.is-active-route) .kurumi-megabtn__dot {
  display: none;
}

/* Mega panels ------------------------------------------------------------- */

.kurumi-megapanel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 300px;
  max-width: min(720px, 92vw);
  padding: 1.1rem;
  background: var(--kurumi-panel-bg);
  border: 1px solid var(--kurumi-masthead-border);
  border-top: 1px solid var(--kurumi-gold);
  border-radius: 0 0 14px 14px;
  box-shadow: var(--kurumi-panel-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1032;
}

.kurumi-megapanel[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  .kurumi-megapanel:not([hidden]) {
    animation: kurumi-panel-in 0.22s ease both;
  }
}

@keyframes kurumi-panel-in {
  from {
    opacity: 0;
    transform: translate(-50%, -8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.kurumi-megapanel__title {
  margin: 0 0 0.75rem;
  padding: 0 0.4rem 0.55rem;
  border-bottom: 1px solid var(--kurumi-line);
  font-family: "Cormorant Garamond", "Playfair Display", "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kurumi-gold);
}

.kurumi-megapanel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.35rem;
}

.kurumi-megalink {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.75rem;
  align-items: center;
  padding: 0.6rem 0.7rem;
  border-radius: 9px;
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.kurumi-megapanel .kurumi-megalink__icon i[class*="text-"] {
  color: var(--kurumi-gold) !important;
}

.kurumi-megalink__icon {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--kurumi-border);
  border-radius: 9px;
  color: var(--kurumi-gold);
  background: rgba(176, 142, 62, 0.07);
  font-size: 0.95rem;
}

.kurumi-megalink__name {
  color: var(--kurumi-ivory);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
}

.kurumi-megalink__desc {
  color: var(--kurumi-ivory-muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.kurumi-megalink:hover,
.kurumi-megalink:focus-visible {
  background: rgba(176, 142, 62, 0.09);
  border-left-color: var(--kurumi-gold);
}

.kurumi-megalink.is-active {
  background: rgba(154, 27, 18, 0.18);
  border-left-color: var(--kurumi-crimson-high);
}

.kurumi-megalink.is-active .kurumi-megalink__name::after {
  content: " \2014 active";
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kurumi-gold);
}

.kurumi-megapanel__note {
  margin: 0.7rem 0.4rem 0;
  font-size: 0.75rem;
  color: var(--kurumi-ivory-muted);
}

/* ==========================================================================
   Right cluster: account + drawer toggle
   ========================================================================== */

.kurumi-masthead__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  position: relative;
}

.kurumi-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--kurumi-border);
  border-radius: 10px;
  background: rgba(176, 142, 62, 0.06);
  color: var(--kurumi-ivory-muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.kurumi-iconbtn:hover,
.kurumi-iconbtn:focus-visible,
.kurumi-iconbtn[aria-expanded="true"] {
  color: var(--kurumi-ivory);
  border-color: var(--kurumi-gold);
  background: rgba(176, 142, 62, 0.14);
}

/* Account (logged in) ----------------------------------------------------- */

.kurumi-account__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.28rem 0.6rem 0.28rem 0.28rem;
  border: 1px solid var(--kurumi-border);
  border-radius: 999px;
  background: rgba(176, 142, 62, 0.06);
  color: var(--kurumi-ivory);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.kurumi-account__trigger:hover,
.kurumi-account__trigger:focus-visible,
.kurumi-account__trigger[aria-expanded="true"] {
  border-color: var(--kurumi-gold);
  background: rgba(176, 142, 62, 0.13);
}

.kurumi-account__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--kurumi-gold);
  object-fit: cover;
}

.kurumi-account__name {
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Scoped to the masthead actions cluster so page content may still reuse
   .kurumi-menu as a plain styled container in later phases. */
.kurumi-masthead__actions .kurumi-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  min-width: 240px;
  padding: 0.6rem;
  background: var(--kurumi-panel-bg);
  border: 1px solid var(--kurumi-masthead-border);
  border-radius: 12px;
  box-shadow: var(--kurumi-panel-shadow);
  z-index: 1034;
}

.kurumi-menu[hidden] {
  display: none !important;
}

.kurumi-menu__header {
  padding: 0.4rem 0.6rem 0.6rem;
  border-bottom: 1px solid var(--kurumi-line);
  margin-bottom: 0.4rem;
}

.kurumi-menu__name {
  display: block;
  color: var(--kurumi-ivory);
  font-weight: 700;
  font-size: 0.95rem;
}

.kurumi-menu__label {
  display: block;
  color: var(--kurumi-ivory-muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0.6rem 0.3rem;
}

.kurumi-menu__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--kurumi-ivory-muted);
  font-size: 0.9rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.kurumi-menu__item:hover,
.kurumi-menu__item:focus-visible {
  background: rgba(176, 142, 62, 0.1);
  color: var(--kurumi-ivory);
}

.kurumi-menu__item.kurumi-btn-danger:hover,
.kurumi-menu__item.kurumi-btn-danger:focus-visible {
  background: rgba(154, 27, 18, 0.22);
  color: var(--kurumi-crimson-high);
}

/* Login seal button (masthead) -------------------------------------------- */

.kurumi-masthead .kurumi-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--kurumi-crimson-high);
  border-radius: 999px;
  background: var(--kurumi-crimson-deep);
  color: var(--kurumi-ivory);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.kurumi-masthead .kurumi-btn-primary:hover,
.kurumi-masthead .kurumi-btn-primary:focus-visible {
  background: var(--kurumi-crimson);
  border-color: var(--kurumi-gold);
  box-shadow: 0 0 14px rgba(200, 32, 26, 0.35);
}

/* ==========================================================================
   Mobile drawer
   ========================================================================== */

.kurumi-drawer-toggle {
  display: none;
}

.kurumi-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 3, 7, 0.6);
  z-index: 1040;
}

.kurumi-drawer-overlay[hidden] {
  display: none !important;
}

.kurumi-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--kurumi-drawer-width);
  z-index: 1046;
  display: flex;
  flex-direction: column;
  background: var(--kurumi-charcoal);
  border-left: 1px solid var(--kurumi-masthead-border);
  box-shadow: var(--kurumi-panel-shadow);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.kurumi-drawer[hidden] {
  display: none !important;
}

.kurumi-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--kurumi-line);
}

.kurumi-drawer__title {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 1.2rem;
  color: var(--kurumi-gold);
  letter-spacing: 0.06em;
}

.kurumi-drawer__body {
  padding: 0.6rem 1.1rem 1.4rem;
}

.kurumi-drawer__group {
  border-bottom: 1px solid var(--kurumi-line);
  padding: 0.35rem 0;
}

.kurumi-drawer__groupbtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem 0.15rem;
  background: none;
  border: 0;
  color: var(--kurumi-ivory);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.kurumi-drawer__groupbtn .kurumi-drawer__chev {
  color: var(--kurumi-gold);
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.kurumi-drawer__groupbtn[aria-expanded="true"] .kurumi-drawer__chev {
  transform: rotate(180deg);
}

.kurumi-drawer__links {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0 0 0 0.4rem;
}

.kurumi-drawer__links[hidden] {
  display: none !important;
}

.kurumi-drawer__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.6rem;
  border-radius: 9px;
  color: var(--kurumi-ivory-muted);
  font-size: 1rem;
  text-decoration: none;
  min-height: 44px;
}

.kurumi-drawer__link:hover,
.kurumi-drawer__link:focus-visible {
  background: rgba(176, 142, 62, 0.1);
  color: var(--kurumi-ivory);
}

.kurumi-drawer__link.is-active {
  color: var(--kurumi-ivory);
  border-left: 2px solid var(--kurumi-crimson-high);
}

.kurumi-drawer__link i {
  color: var(--kurumi-gold);
  width: 1.4em;
  text-align: center;
}

.kurumi-drawer__link i[class*="text-"] {
  color: var(--kurumi-gold) !important;
}

/* Breakpoints ------------------------------------------------------------- */

@media (max-width: 1279.98px) {
  .kurumi-megamenu {
    display: none;
  }

  .kurumi-masthead__bar {
    gap: 0.6rem;
  }

  .kurumi-masthead__actions {
    margin-left: auto;
  }

  .kurumi-account__name {
    display: none;
  }

  .kurumi-drawer-toggle {
    display: inline-flex;
  }

  .kurumi-masthead__actions > .kurumi-menu {
    position: fixed;
    top: calc(var(--kurumi-masthead-h) + 0.5rem);
    left: 0.75rem;
    right: 0.75rem;
    min-width: 0;
  }
}

/* Compact masthead (R2).
   Below 576px the wordmark, full login seal, and drawer toggle need a
   tighter bar. The shorter login label at phone widths keeps the link's
   accessible name intact without pushing the document sideways. This block
   follows the 991.98px rules so it wins the cascade at phone widths. */

/* Default: the short label is hidden until the compact breakpoint shows it.
   Declared before the media block below so the breakpoint wins the cascade. */
.kurumi-masthead .kurumi-btn-primary .kurumi-masthead__login-short {
  display: none;
}

@media (max-width: 575.98px) {
  .kurumi-masthead__bar {
    gap: 0.5rem;
    padding-inline: 0.8rem;
  }

  .kurumi-wordmark {
    min-width: 0;
    flex: 0 1 auto;
    gap: 0.45rem;
  }

  .kurumi-wordmark__ring {
    width: 28px;
    height: 28px;
  }

  .kurumi-wordmark__text {
    font-size: 1.15rem;
    max-width: 30vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kurumi-masthead .kurumi-btn-primary {
    padding: 0.5rem 0.8rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }

  .kurumi-masthead .kurumi-btn-primary .kurumi-masthead__login-long {
    display: none;
  }

  .kurumi-masthead .kurumi-btn-primary .kurumi-masthead__login-short {
    display: inline;
  }

  .kurumi-iconbtn {
    width: 36px;
    height: 36px;
  }
}

@media (min-width: 1280px) {
  .kurumi-drawer,
  .kurumi-drawer-overlay {
    display: none !important;
  }
}

/* Panels anchor relative to the masthead bar so they never clip. */
.kurumi-masthead__bar {
  position: relative;
}

/* ==========================================================================
   Motion policy
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .kurumi-masthead *,
  .kurumi-masthead *::before,
  .kurumi-masthead *::after,
  .kurumi-drawer,
  .kurumi-drawer * {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   Sidenav-free layout (replaces the retired fixed-start offsets)
   The stage is ordinary flow content under the sticky masthead.
   ========================================================================== */

.kurumi .kurumi-stage {
  width: 100%;
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: clamp(1.25rem, 3vh, 2.25rem);
}

/* Anchor target for the skip link inside page content. */
.kurumi :target {
  scroll-margin-top: calc(var(--kurumi-masthead-h) + 1rem);
}

/* ==========================================================================
   Aurora shell (masthead, mega menu, account chip, footer)
   Uses the --ka-* tokens from kurumi-aurora.css (loaded later, same :root).
   ========================================================================== */

.kurumi-masthead {
  background: linear-gradient(180deg, rgba(7, 6, 11, 0.94), rgba(14, 10, 20, 0.86));
  border-bottom: 1px solid transparent;
  border-image: var(--ka-grad-hair, linear-gradient(90deg, transparent, rgba(214, 178, 94, 0.5), transparent)) 1;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9);
}

.kn-glyph { flex: 0 0 auto; overflow: visible; }
.kn-glyph__ring { stroke: var(--ka-gold-400, #c9a24b); opacity: 0.9; }
.kn-glyph__ring--in { stroke: var(--ka-crimson-400, #b3202c); opacity: 0.8; transform-origin: 20px 20px; }
.kn-glyph__ticks path, .kn-glyph__hand { stroke: var(--ka-gold-200, #e6cf8e); stroke-width: 1.8; stroke-linecap: round; fill: none; }
.kn-glyph__ticks path { stroke-width: 1.2; opacity: 0.7; }
.kn-glyph__hand--hr { stroke: var(--ka-crimson-300, #d6414d); }
.kn-glyph__hand { transform-origin: 20px 20px; }
.kn-glyph__hub { fill: var(--ka-gold-300, #d6b25e); }

@media (prefers-reduced-motion: no-preference) {
  .kn-glyph__hand--min { animation: kn-tick 60s steps(60) infinite; }
  .kn-glyph__hand--hr { animation: kn-tick 720s linear infinite; }
  .kn-glyph__ring--in { animation: kn-tick 40s linear infinite reverse; }
  .kurumi-wordmark:hover .kn-glyph__hand--min { animation-duration: 6s; }
}
@keyframes kn-tick { to { transform: rotate(360deg); } }

.kurumi-wordmark { gap: 0.55rem; }
.kurumi-wordmark__text {
  background: var(--ka-grad-brass-text, linear-gradient(180deg, #f4e7bd, #c9a24b));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  letter-spacing: 0.04em;
}

.kurumi-megabtn { position: relative; }
.kurumi-megabtn::after {
  background: linear-gradient(90deg, transparent, var(--ka-gold-300, #d6b25e), transparent);
}
.kurumi-megabtn.is-active-route { color: var(--ka-ivory, #f3ece0); }
.kurumi-megabtn.is-active-route::after { transform: scaleX(1); opacity: 1; background: linear-gradient(90deg, transparent, var(--ka-crimson-400, #b3202c), transparent); }

.kurumi-megapanel {
  background: linear-gradient(180deg, rgba(22, 14, 28, 0.97), rgba(10, 7, 16, 0.98));
  border-color: var(--ka-line-gold, rgba(214, 178, 94, 0.28));
  border-top: 0;
  border-radius: 0 0 var(--ka-r-lg, 16px) var(--ka-r-lg, 16px);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.kurumi-megapanel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--ka-grad-hair, linear-gradient(90deg, transparent, #d6b25e, transparent));
}
.kurumi-megapanel__title { font-family: var(--ka-font-display, "Cormorant Garamond", serif); letter-spacing: 0.14em; }
.kurumi-megalink { border-left-width: 0; position: relative; }
.kurumi-megalink::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 2px; border-radius: 2px;
  background: var(--ka-grad-crimson-hi, #b3202c); opacity: 0; transform: scaleY(0.4);
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.kurumi-megalink:hover::before, .kurumi-megalink:focus-visible::before, .kurumi-megalink.is-active::before { opacity: 1; transform: scaleY(1); }
.kurumi-megalink:hover .kurumi-megalink__icon { border-color: var(--ka-gold-300, #d6b25e); box-shadow: var(--ka-glow-gold, 0 0 14px rgba(214, 178, 94, 0.25)); }
.kurumi-megalink.is-active { background: linear-gradient(90deg, rgba(154, 27, 18, 0.28), rgba(154, 27, 18, 0.06)); }
.kurumi-megalink.is-active .kurumi-megalink__icon { color: var(--ka-ivory, #f3ece0); border-color: var(--ka-crimson-400, #b3202c); background: rgba(154, 27, 18, 0.35); }

/* Account chip + menu */
.kurumi-account__trigger {
  border-color: var(--ka-line-gold, rgba(214, 178, 94, 0.28));
  background: linear-gradient(180deg, rgba(214, 178, 94, 0.1), rgba(154, 27, 18, 0.12));
}
.kurumi-account__trigger:hover, .kurumi-account__trigger[aria-expanded="true"] { box-shadow: var(--ka-glow-gold, 0 0 16px rgba(214, 178, 94, 0.22)); }
.kurumi-account__avatar { border-color: var(--ka-gold-300, #d6b25e); box-shadow: 0 0 0 2px rgba(7, 6, 11, 0.9), 0 0 0 3px rgba(154, 27, 18, 0.7); }
.kurumi-account__trigger > .fa { transition: transform 0.25s ease; font-size: 0.7rem; color: var(--ka-gold-300, #d6b25e); }
.kurumi-account__trigger[aria-expanded="true"] > .fa { transform: rotate(180deg); }
.kurumi-masthead__actions .kurumi-menu {
  min-width: 260px; padding: 0.5rem;
  background: linear-gradient(180deg, rgba(24, 15, 30, 0.98), rgba(10, 7, 16, 0.98));
  border-color: var(--ka-line-gold, rgba(214, 178, 94, 0.28));
  border-radius: var(--ka-r-md, 14px);
  box-shadow: 0 28px 60px -18px rgba(0, 0, 0, 0.9);
  transform-origin: top right;
}
@media (prefers-reduced-motion: no-preference) {
  .kurumi-masthead__actions .kurumi-menu:not([hidden]) { animation: kn-pop 0.2s ease both; }
}
@keyframes kn-pop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.kn-menu__header { display: flex; align-items: center; gap: 0.7rem; }
.kn-menu__avatar { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ka-gold-300, #d6b25e); object-fit: cover; }
.kn-menu__who { display: flex; flex-direction: column; min-width: 0; gap: 0.15rem; }
.kn-menu__who .kurumi-menu__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-menu__role { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ka-gold-200, #e6cf8e); }
.kn-menu__rule { border: 0; height: 1px; margin: 0.4rem 0.4rem; background: var(--ka-grad-hair, rgba(214, 178, 94, 0.3)); opacity: 0.8; }
.kurumi-menu__item { border-radius: var(--ka-r-sm, 10px); }
.kurumi-menu__item i { width: 1.3em; text-align: center; color: var(--ka-gold-300, #d6b25e); }
.kurumi-menu__item.kurumi-btn-danger i { color: var(--ka-crimson-300, #d6414d); }

/* Drawer */
.kurumi-drawer {
  background: linear-gradient(180deg, rgba(20, 12, 26, 0.99), rgba(7, 6, 11, 0.99));
  border-left: 1px solid var(--ka-line-gold, rgba(214, 178, 94, 0.28));
}
.kurumi-drawer__title { font-family: var(--ka-font-display, "Cormorant Garamond", serif); letter-spacing: 0.16em; color: var(--ka-gold-200, #e6cf8e); }
.kurumi-drawer__link.is-active { background: linear-gradient(90deg, rgba(154, 27, 18, 0.3), transparent); box-shadow: inset 2px 0 0 var(--ka-crimson-400, #b3202c); }

/* Footer */
.kf { position: relative; padding: 0 0 1.4rem; background: linear-gradient(180deg, rgba(7, 6, 11, 0), rgba(7, 6, 11, 0.92) 40%); border-top: 0; }
.kf__rule { display: flex; align-items: center; gap: 1rem; max-width: 1480px; margin: 0 auto 1.6rem; padding-inline: var(--kurumi-shell-gap, 1rem); }
.kf__rule::before, .kf__rule::after { content: ""; flex: 1; height: 1px; background: var(--ka-grad-hair, linear-gradient(90deg, transparent, rgba(214, 178, 94, 0.5), transparent)); }
.kf__rule span { font-family: var(--ka-font-display, "Cormorant Garamond", serif); color: var(--ka-gold-300, #d6b25e); letter-spacing: 0.4em; font-size: 0.8rem; }
.kf__inner { display: grid; grid-template-columns: minmax(14rem, 1.1fr) minmax(0, 2.4fr); gap: 1.6rem 2.5rem; align-items: start; }
.kf__brandcol { display: flex; flex-direction: column; gap: 0.35rem; }
.kf__brand { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 1.35rem !important; color: var(--ka-ivory, #f3ece0) !important; }
.kf__tagline { color: var(--ka-ivory-dim, #cfc4b6); font-size: 0.85rem; }
.kf__tagline--sub { color: var(--ka-ivory-mute, #a99d8f); font-style: italic; font-size: 0.8rem; max-width: 30ch; }
.kf__status { display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content; margin-top: 0.4rem; padding: 0.3rem 0.75rem; border: 1px solid var(--ka-line-gold, rgba(214, 178, 94, 0.28)); border-radius: 999px; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ka-ivory-dim, #cfc4b6); text-decoration: none; }
.kf__status:hover { border-color: var(--ka-gold-300, #d6b25e); color: var(--ka-ivory, #f3ece0); }
.kf__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ka-ok, #4fb37a); box-shadow: 0 0 8px var(--ka-ok, #4fb37a); }
.kf__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.kf__heading { margin: 0 0 0.5rem; font-family: var(--ka-font-display, "Cormorant Garamond", serif); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ka-gold-300, #d6b25e); }
.kf__list { flex-direction: column; justify-content: flex-start !important; align-items: flex-start; gap: 0 !important; }
.kf__list .nav-link { padding: 0.28rem 0 !important; font-size: 0.85rem !important; color: var(--ka-ivory-dim, #cfc4b6) !important; }
.kf__list .nav-link:hover, .kf__list .nav-link:focus-visible { color: var(--ka-ivory, #f3ece0) !important; }
.kf__credits { grid-column: 1 / -1; padding-top: 0.9rem; border-top: 1px solid var(--ka-line, rgba(255, 255, 255, 0.08)); text-align: center !important; color: var(--ka-ivory-mute, #a99d8f); }
.kf__credits a { color: var(--ka-gold-200, #e6cf8e); }

@media (max-width: 767.98px) {
  .kf__inner { grid-template-columns: 1fr; }
  .kf__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) { .kf__nav { grid-template-columns: 1fr; } }
.kf__list { padding: 0 !important; margin: 0 !important; list-style: none; }
.kf__list .nav-item { padding: 0 !important; }
@media (max-width: 767.98px) { .kf__brandcol { align-items: flex-start; } }

/* Desktop nav fit (R5.17.18): never wrap a menu label, and tighten the buttons on
   mid-size desktops so the owner's full menu (incl. Owner Portal + Explore) fits
   between the wordmark and the account chip. Below 1280px the drawer takes over. */
.kurumi-megabtn { white-space: nowrap; }
@media (min-width: 1280px) and (max-width: 1499.98px) {
  .kurumi-megabtn { padding: 0.5rem 0.6rem; letter-spacing: 0.1em; }
  .kurumi-megamenu { gap: 0.05rem; }
}

/* Tall panels (Owner portal has many entries): never run off the screen.
   Scroll inside the panel, go three columns wide when the viewport allows,
   and tighten descriptions so the whole list fits on one screen. */
.kurumi-megapanel {
  max-height: calc(100vh - 5.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--kurumi-gold) transparent;
}

.kurumi-megapanel:has(.kurumi-megapanel__grid > :nth-child(7)) {
  width: min(1000px, 94vw);
  max-width: min(1000px, 94vw);
}

.kurumi-megapanel:has(.kurumi-megapanel__grid > :nth-child(7)) .kurumi-megapanel__grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.kurumi-megapanel:has(.kurumi-megapanel__grid > :nth-child(7)) .kurumi-megalink__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Account menu: never taller than the window. With many entries (Play, My awards, My settings, What I share, Support tickets ...)
   the list scrolls inside the menu instead of running off the bottom of the screen. */
.kurumi-masthead__actions .kurumi-menu {
  max-height: calc(100vh - var(--kurumi-masthead-h, 4.5rem) - 1.25rem);
  max-height: calc(100dvh - var(--kurumi-masthead-h, 4.5rem) - 1.25rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* Mega panels stay inside the window: kurumi-megamenu.js measures an open panel and sets --kurumi-mega-shift (px) so a wide panel centred on a
   right-hand menu item is pulled back inside 8px margins instead of running off the screen. Without the script the shift is 0. */
.kurumi-megapanel {
  transform: translateX(calc(-50% + var(--kurumi-mega-shift, 0px)));
}

@keyframes kurumi-panel-in {
  from {
    opacity: 0;
    transform: translate(calc(-50% + var(--kurumi-mega-shift, 0px)), -8px);
  }
  to {
    opacity: 1;
    transform: translate(calc(-50% + var(--kurumi-mega-shift, 0px)), 0);
  }
}