/* =================================================================
   XTEMPLATES · navigation system — 10 switchable menu styles.
   The active style is a class (m1..m10) on the #xnav root; menus.js
   swaps it live. All themed through the same CSS variables.
   ================================================================= */

.xn { position: fixed; z-index: 70; font-family: var(--font-body); }
.xn a { color: inherit; }
.xn-brand { font-family: var(--font-mono); font-weight: 700;
  letter-spacing: 0.04em; }

/* ---- m1 · top bar ---------------------------------------------- */
.xn.m1 { top: 0; left: 0; right: 0; height: 62px; display: flex;
  align-items: center; justify-content: space-between; padding: 0 24px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.xn.m1 .xn-links { display: flex; gap: 26px; }
.xn.m1 .xn-links a { font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; position: relative;
  padding: 4px 0; }
.xn.m1 .xn-links a::after { content: ''; position: absolute; left: 0;
  bottom: -2px; height: 2px; width: 0; background: var(--accent);
  transition: width 0.25s ease; }
.xn.m1 .xn-links a:hover::after { width: 100%; }

/* ---- m2 · top centered ----------------------------------------- */
.xn.m2 { top: 0; left: 0; right: 0; padding: 16px 24px; display: flex;
  flex-direction: column; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  animation: xn-fadedown 0.5s ease; }
.xn.m2 .xn-brand { font-size: 17px; }
.xn.m2 .xn-links { display: flex; gap: 30px; }
.xn.m2 .xn-links a { font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
  transition: color 0.2s; }
.xn.m2 .xn-links a:hover { color: var(--accent); }
@keyframes xn-fadedown { from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; } }

/* ---- m3 · right docked tab → pill stack ------------------------ */
.xn.m3 .xn-tab { position: fixed; top: 58%; right: 0;
  transform: translateY(-50%); writing-mode: vertical-rl;
  letter-spacing: 0.3em; text-transform: uppercase;
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  background: var(--accent); color: var(--accent-fg); padding: 22px 10px;
  border-radius: 10px 0 0 10px; cursor: pointer;
  box-shadow: -6px 8px 24px rgba(0,0,0,0.25); }
.xn.m3 .xn-stack { position: fixed; top: 58%; right: 60px;
  transform: translateY(-50%) translateX(120%); display: flex;
  flex-direction: column; gap: 8px; opacity: 0; pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1),
    opacity 0.3s ease; }
.xn.m3.open .xn-stack { transform: translateY(-50%) translateX(0);
  opacity: 1; pointer-events: auto; }
.xn.m3 .xn-stack a { background: var(--accent); color: var(--accent-fg);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.25em;
  text-transform: uppercase; padding: 12px 26px; border-radius: 999px;
  text-align: center; }

/* ---- m4 · left rail -------------------------------------------- */
.xn.m4 { top: 0; left: 0; bottom: 0; width: 64px; display: flex;
  flex-direction: column; align-items: center; justify-content: space-between;
  padding: 22px 0; background: var(--bg); border-right: 1px solid var(--line); }
.xn.m4 .xn-brand { writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; }
.xn.m4 .xn-links { display: flex; flex-direction: column; gap: 20px;
  align-items: center; }
.xn.m4 .xn-links a { writing-mode: vertical-rl; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); transition: color 0.2s; }
.xn.m4 .xn-links a:hover { color: var(--accent); }

/* ---- shared burger / scrim (m5, m6, m7) ------------------------ */
.xn-burger { width: 34px; height: 34px; display: inline-flex;
  flex-direction: column; gap: 5px; justify-content: center; cursor: pointer; }
.xn-burger span { height: 2px; background: var(--fg);
  transition: transform 0.3s, opacity 0.3s; }
.xn.open .xn-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.xn.open .xn-burger span:nth-child(2) { opacity: 0; }
.xn.open .xn-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.xn-bar { position: fixed; top: 0; left: 0; right: 0; height: 58px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.xn-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.xn.open .xn-scrim { opacity: 1; pointer-events: auto; }

/* ---- m5 · left drawer ------------------------------------------ */
.xn.m5 .xn-drawer { position: fixed; top: 0; bottom: 0; left: 0;
  width: min(320px, 82vw); background: var(--bg);
  border-right: 1px solid var(--line); transform: translateX(-100%);
  transition: transform 0.42s cubic-bezier(0.16,1,0.3,1);
  padding: 88px 30px; display: flex; flex-direction: column; gap: 16px; }
.xn.m5.open .xn-drawer { transform: none; }
.xn.m5 .xn-drawer a, .xn.m6 .xn-drawer a { font-family: var(--font-display);
  font-weight: 700; font-size: 1.7rem; letter-spacing: -0.01em; }

/* ---- m6 · right drawer ----------------------------------------- */
.xn.m6 .xn-bar { flex-direction: row-reverse; }
.xn.m6 .xn-drawer { position: fixed; top: 0; bottom: 0; right: 0;
  width: min(320px, 82vw); background: var(--bg);
  border-left: 1px solid var(--line); transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.16,1,0.3,1);
  padding: 88px 30px; display: flex; flex-direction: column;
  gap: 16px; text-align: right; }
.xn.m6.open .xn-drawer { transform: none; }

/* ---- m7 · fullscreen overlay ----------------------------------- */
.xn.m7 .xn-bar { flex-direction: row-reverse; background: transparent;
  border: 0; backdrop-filter: none; }
.xn.m7 .xn-overlay { position: fixed; inset: 0; background: var(--bg);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; clip-path: circle(0% at 100% 0%);
  transition: clip-path 0.55s cubic-bezier(0.7,0,0.2,1); }
.xn.m7.open .xn-overlay { clip-path: circle(150% at 100% 0%); }
.xn.m7 .xn-overlay a { font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 7vw, 4rem); letter-spacing: -0.02em;
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.4s ease, transform 0.4s ease; }
.xn.m7.open .xn-overlay a { opacity: 1; transform: none; }
.xn.m7.open .xn-overlay a:nth-child(1) { transition-delay: 0.12s; }
.xn.m7.open .xn-overlay a:nth-child(2) { transition-delay: 0.18s; }
.xn.m7.open .xn-overlay a:nth-child(3) { transition-delay: 0.24s; }
.xn.m7.open .xn-overlay a:nth-child(4) { transition-delay: 0.30s; }
.xn.m7.open .xn-overlay a:nth-child(5) { transition-delay: 0.36s; }

/* ---- m8 · bottom dock ------------------------------------------ */
.xn.m8 .xn-dock { position: fixed; left: 50%; bottom: 22px;
  transform: translateX(-50%); display: flex; gap: 4px; padding: 7px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px); border: 1px solid var(--line);
  border-radius: 999px; box-shadow: 0 12px 40px rgba(0,0,0,0.18); }
.xn.m8 .xn-dock a { font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 18px;
  border-radius: 999px; transition: transform 0.2s, background 0.2s; }
.xn.m8 .xn-dock a:hover { background: var(--accent);
  color: var(--accent-fg); transform: translateY(-3px); }

/* ---- m9 · corner FAB (arc expand) ------------------------------ */
.xn.m9 .xn-fab { position: fixed; right: 24px; bottom: 24px; width: 56px;
  height: 56px; border-radius: 50%; background: var(--accent);
  color: var(--accent-fg); display: flex; align-items: center;
  justify-content: center; font-size: 26px; cursor: pointer; z-index: 2;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3); transition: transform 0.3s; }
.xn.m9.open .xn-fab { transform: rotate(135deg); }
.xn.m9 .xn-arc a { position: fixed; right: 29px; bottom: 29px; width: 46px;
  height: 46px; border-radius: 50%; background: var(--bg);
  border: 1px solid var(--line); color: var(--fg); display: flex;
  align-items: center; justify-content: center; font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase;
  transform: translate(0,0) scale(0.3); opacity: 0;
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), opacity 0.3s; }
.xn.m9.open .xn-arc a { opacity: 1; }
.xn.m9.open .xn-arc a:nth-child(1) { transform: translate(0,-78px) scale(1); }
.xn.m9.open .xn-arc a:nth-child(2) { transform: translate(-55px,-55px) scale(1); }
.xn.m9.open .xn-arc a:nth-child(3) { transform: translate(-78px,0) scale(1); }
.xn.m9.open .xn-arc a:nth-child(4) { transform: translate(-55px,55px) scale(1); }
.xn.m9.open .xn-arc a:nth-child(5) { transform: translate(0,78px) scale(1); }

/* ---- m10 · sticky shrink --------------------------------------- */
.xn.m10 { top: 0; left: 0; right: 0; padding: 22px 24px; display: flex;
  align-items: center; justify-content: space-between;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid transparent;
  transition: padding 0.3s ease, border-color 0.3s ease; }
.xn.m10.shrink { padding: 9px 24px; border-color: var(--line); }
.xn.m10 .xn-brand { font-size: 20px; transition: font-size 0.3s; }
.xn.m10.shrink .xn-brand { font-size: 15px; }
.xn.m10 .xn-links { display: flex; gap: 24px; }
.xn.m10 .xn-links a { font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  transition: color 0.2s; }
.xn.m10 .xn-links a:hover { color: var(--accent); }

/* ---- control dock: live menu switcher + edit toggle ------------ */
.xctl { position: fixed; left: 10px; bottom: 10px; z-index: 9000;
  display: flex; gap: 8px; }
.xctl button { font: 600 10px/1 var(--font-mono); letter-spacing: 0.14em;
  text-transform: uppercase; padding: 10px 13px; background: var(--bg);
  color: var(--fg); border: 1px solid var(--fg); cursor: pointer; }
.xctl button:hover { background: var(--fg); color: var(--bg); }
.xmenu-pop { position: fixed; left: 10px; bottom: 48px; z-index: 9001;
  background: var(--bg); border: 1px solid var(--fg); padding: 6px;
  display: none; grid-template-columns: 1fr 1fr; gap: 4px; width: 300px;
  box-shadow: 0 14px 50px rgba(0,0,0,0.25); }
.xmenu-pop.show { display: grid; }
.xmenu-pop button { font: 500 10px/1.3 var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase; text-align: left;
  padding: 9px 10px; background: var(--bg); color: var(--fg);
  border: 1px solid var(--line); cursor: pointer; }
.xmenu-pop button.active { background: var(--accent);
  color: var(--accent-fg); border-color: var(--accent); }

@media (max-width: 720px) {
  .xn.m1 .xn-links, .xn.m10 .xn-links { gap: 14px; }
  .xn.m1 .xn-links a, .xn.m10 .xn-links a { font-size: 10px; }
}