/*
 * WAKE✳︎ MAINTAINER NOTE
 * Shared navigation styling. Keep menu geometry stable across mobile/desktop without coupling CSS to durable state.
 */

/* Shared compact navigation for the main journal and MAP. */
nav.compact-nav{display:flex;align-items:center;justify-content:center;gap:22px;flex:0 1 auto;font:14px/1.4 var(--sans);white-space:nowrap}
.compact-nav>a,.compact-nav summary{display:flex;align-items:center;gap:7px;min-height:44px;padding:10px 0;color:var(--muted);font:inherit;cursor:pointer}
.compact-nav .nav-group{position:relative;margin:0;padding:0;border:0;background:none;overflow:visible}
.compact-nav summary{list-style:none;border:0}
.compact-nav summary::-webkit-details-marker{display:none}
.compact-nav summary::after{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.compact-nav .nav-group[open]>summary::after{transform:translateY(1px) rotate(225deg)}
.compact-nav .nav-dropdown{position:absolute;top:calc(100% + 5px);left:-16px;z-index:30;min-width:175px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 28px #0002}
.compact-nav .nav-dropdown a{display:flex;align-items:center;min-height:44px;padding:10px 12px;border:0;border-radius:4px;color:var(--muted);font:14px/1.4 var(--sans)}
.compact-nav .nav-dropdown .nav-external{border-top:1px solid var(--line);border-radius:0;margin-top:5px;padding-top:14px}
.compact-nav .nav-group:has([aria-current=page])>summary,.compact-nav a[aria-current=page]{color:var(--green);font-weight:700}
.compact-nav summary:focus-visible,.compact-nav a:focus-visible{outline:2px solid var(--hot);outline-offset:3px}
@media(hover:hover){.compact-nav summary:hover,.compact-nav .nav-dropdown a:hover{color:var(--hot);text-shadow:0 0 12px #a827ff55}.compact-nav .nav-dropdown a:hover{background:var(--paper)}}
@media(max-width:1100px){.masthead{flex-wrap:wrap}.masthead .status{display:none}.masthead nav.compact-nav{gap:18px}}
@media(max-width:700px){.masthead nav.compact-nav,nav.compact-nav{display:flex;order:3;flex-basis:100%;justify-content:space-between;gap:14px;font-size:14px}.compact-nav .nav-dropdown{left:0}.compact-nav .nav-group:last-of-type .nav-dropdown{left:auto;right:-12px}}

/* Keep dropdowns tappable/visible on touch layouts and prevent global details spacing from moving nav labels. */
.compact-nav .nav-group[open]>summary{margin-bottom:0}
@media(max-width:700px){
  .masthead nav.compact-nav,nav.compact-nav{overflow:visible;padding-bottom:0}
  .compact-nav .nav-dropdown{top:100%;margin-top:5px}
}

/* v0.22 — compact controls match the refreshed field-notebook surfaces. */
.compact-nav .nav-dropdown{border-radius:8px;box-shadow:0 10px 24px rgb(45 58 108 / .14);padding:7px}
.compact-nav .nav-dropdown a{border-radius:4px}
.compact-nav>a,.compact-nav summary{color:var(--muted)}
.compact-nav .nav-group:has([aria-current=page])>summary,.compact-nav a[aria-current=page]{color:var(--green)}

/* Mobile navigation belongs inside the viewport: wrap the full menu instead of turning the masthead into a horizontal scroller. */
@media(max-width:700px){
  .masthead nav.compact-nav,nav.compact-nav{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    max-width:100%;
    overflow:visible;
    gap:2px 12px;
    white-space:normal;
  }
  .compact-nav>a,.compact-nav summary{
    min-width:0;
    width:100%;
    min-height:40px;
    padding:7px 0;
    white-space:nowrap;
  }
  .compact-nav .nav-group{min-width:0}
  .compact-nav .nav-dropdown{min-width:min(175px,calc(100vw - 40px))}
  .compact-nav .nav-group:nth-last-child(-n+2) .nav-dropdown{left:auto;right:0}
}

/* Mobile menu polish: balanced columns and dropdowns above the page content. */
@media(max-width:700px){
  .masthead{position:relative;z-index:100;overflow:visible}
  .masthead nav.compact-nav,nav.compact-nav{
    position:relative;
    z-index:110;
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:18px;
    row-gap:4px;
  }
  .compact-nav>a,.compact-nav .nav-group{justify-self:stretch}
  .compact-nav>a,.compact-nav summary{justify-content:flex-start}
  .compact-nav>a:nth-child(3n+2),.compact-nav .nav-group:nth-child(3n+2) summary{justify-content:center}
  .compact-nav>a:nth-child(3n),.compact-nav .nav-group:nth-child(3n) summary{justify-content:flex-end}
  .compact-nav .nav-group{position:relative;z-index:120}
  .compact-nav .nav-group[open]{z-index:1000}
  .compact-nav .nav-dropdown{
    z-index:1100;
    top:calc(100% + 4px);
    box-shadow:0 18px 42px rgb(0 0 0 / .38);
  }
  .compact-nav .nav-group:nth-child(3n+2) .nav-dropdown{left:50%;right:auto;transform:translateX(-50%)}
  .compact-nav .nav-group:nth-child(3n) .nav-dropdown{left:auto;right:0;transform:none}
}


/* Shared masthead controls. MAP, 3D MAP, and the main journal use the same mobile geometry. */
.header-tools{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0}
.theme-switch{padding:0;background:transparent;box-shadow:none!important;position:relative;min-height:18px;line-height:1}
.theme-switch .data-switch-track{margin:0;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:flex-start;width:34px;height:18px;flex:0 0 34px;padding:2px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.theme-switch .data-switch-track i{display:block;box-sizing:border-box;flex:0 0 12px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:transform .15s ease,background .15s ease}
.theme-switch input{position:absolute;opacity:0;pointer-events:none}
.theme-switch input:checked+.data-switch-track i{transform:translateX(16px);background:var(--cyan,var(--green))}
.theme-switch input:focus-visible+.data-switch-track{outline:2px solid var(--cyan,var(--green));outline-offset:2px}
.actions-light{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:38px;height:30px;flex:0 0 38px;padding:0;border:0;background:transparent;text-decoration:none;cursor:pointer}
.actions-light-track{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 18px;padding:2px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.actions-light-track i{display:block;box-sizing:border-box;width:12px;height:12px;flex:0 0 12px;border-radius:50%;background:#e7c35a;animation:none;opacity:1}
.actions-light[data-state="running"] .actions-light-track i{background:#307444;animation:actions-light-pulse 3.2s ease-in-out infinite}
.actions-light[data-state="campaign"] .actions-light-track i{background:var(--purple);animation:actions-light-pulse 1.8s ease-in-out infinite}
.actions-light[data-state="stopped"] .actions-light-track i{background:#d65e6c;animation:actions-light-blink 2.4s step-end infinite}
.actions-light:focus-visible{outline:2px solid var(--cyan,var(--green));outline-offset:3px;border-radius:4px}
@keyframes actions-light-pulse{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes actions-light-blink{0%,49%{opacity:1}50%,100%{opacity:.18}}
@media(prefers-reduced-motion:reduce){.actions-light-track i{animation:none!important;opacity:1!important}}
.masthead>.status,.header-tools>.status{display:none!important}
.wordmark .cycle-count{color:var(--cyan,var(--green));font-weight:700}
@media(max-width:760px){
  .masthead{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 14px;padding:18px 16px 16px}
  .wordmark{font-size:clamp(40px,11vw,46px)!important;letter-spacing:-2.6px!important;line-height:.96!important;min-width:0;flex:1 1 auto}
  .wordmark small{font-size:clamp(10px,2.8vw,12px)!important;letter-spacing:1px!important;margin-top:11px!important;line-height:1.35!important;white-space:nowrap}
  .wordmark .cycle-count{font-size:1.18em;font-weight:800;color:var(--green);letter-spacing:.04em}
  .header-tools{position:static!important;transform:none!important;margin-left:auto;align-self:flex-start;flex-direction:row!important;gap:10px;flex:0 0 auto}
  .actions-light{width:44px;height:38px;flex-basis:44px}
  .actions-light-track{width:24px;height:24px;flex-basis:24px;padding:3px}
  .actions-light-track i{width:16px;height:16px;flex-basis:16px}
  .theme-switch{min-width:44px;min-height:38px;display:inline-flex;align-items:center;justify-content:center}
  .theme-switch .data-switch-track{width:42px;height:24px;flex-basis:42px;padding:3px}
  .theme-switch .data-switch-track i{width:16px;height:16px;flex-basis:16px}
  .theme-switch input:checked+.data-switch-track i{transform:translateX(18px)}
}
@media(max-width:390px){
  .masthead{gap:12px 10px;padding:18px 14px 15px}
  .wordmark{font-size:clamp(40px,11.2vw,44px)!important;letter-spacing:-2.4px!important;flex:1 1 210px}
  .wordmark small{font-size:clamp(10px,2.7vw,11px)!important;letter-spacing:.9px!important;margin-top:10px!important}
  .header-tools{gap:8px}
  .actions-light{width:42px;height:38px;flex-basis:42px}
  .actions-light-track{width:23px;height:23px;flex-basis:23px}
  .actions-light-track i{width:15px;height:15px;flex-basis:15px}
  .theme-switch{min-width:42px;min-height:38px}
  .theme-switch .data-switch-track{width:40px;height:23px;flex-basis:40px}
  .theme-switch .data-switch-track i{width:15px;height:15px;flex-basis:15px}
  .theme-switch input:checked+.data-switch-track i{transform:translateX(17px)}
}


/* SHARED BRAND + REPOSITORY + STATUS CONTROLS — 2026-10-04 */
.brand-lockup{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex:0 0 auto;
  min-width:0;
}
.brand-lockup .wordmark{margin:0!important}
.powered-by{
  display:inline-block;
  margin-top:5px;
  color:var(--muted)!important;
  font:9px/1.2 var(--mono);
  letter-spacing:.08em;
  text-transform:none;
  opacity:.82;
}
.powered-by:hover,.powered-by:focus-visible{
  color:var(--cyan,var(--green))!important;
  opacity:1;
  text-shadow:none!important;
}
.header-tools{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex:0 0 auto!important;
}
.repo-link,.console-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  border:0;
  background:transparent;
}
.repo-link{width:32px;height:32px;flex:0 0 32px}
.console-link{width:36px;height:36px;flex:0 0 36px}
.repo-link{border-radius:50%}
.console-link{
  border-radius:8px;
  color:var(--muted);
}
.repo-link svg{width:21px;height:21px;display:block}
.console-link svg{width:27px;height:27px;display:block}
.console-link[aria-current="page"]{
  color:var(--cyan,var(--green));
  background:color-mix(in srgb,var(--cyan,var(--green)) 10%,transparent);
}
.repo-link:hover,.repo-link:focus-visible,
.console-link:hover,.console-link:focus-visible{
  color:var(--cyan,var(--green));
  text-shadow:none!important;
}
.actions-light{
  width:auto!important;
  min-width:96px!important;
  height:34px!important;
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  padding:0 10px!important;
  border:1px solid var(--line)!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--surface) 82%,transparent)!important;
  cursor:pointer!important;
}
.actions-light-track{
  width:22px!important;
  height:22px!important;
  flex:0 0 22px!important;
  padding:3px!important;
  border:1px solid var(--line)!important;
  border-radius:50%!important;
  background:var(--surface)!important;
}
.actions-light-track i{
  width:14px!important;
  height:14px!important;
  flex:0 0 14px!important;
}
.actions-light-label{
  display:inline-block!important;
  color:var(--ink);
  font:700 11px/1 var(--sans);
  white-space:nowrap;
}
.actions-light[data-state="running"] .actions-light-label{color:var(--green)}
.actions-light[data-state="campaign"] .actions-light-label{color:var(--purple)}
.actions-light[data-state="stopped"] .actions-light-label{color:#d65e6c}
@media(max-width:760px){
  .brand-lockup{flex:1 1 205px}
  .powered-by{font-size:8px;margin-top:4px}
  .header-tools{margin-left:auto!important;gap:8px!important}
  .repo-link{width:36px;height:36px;flex-basis:36px}
  .console-link{width:40px;height:40px;flex-basis:40px}
  .repo-link svg{width:22px;height:22px}
  .console-link svg{width:30px;height:30px}
  .actions-light{
    min-width:102px!important;
    height:38px!important;
    padding:0 10px!important;
  }
  .actions-light-track{
    width:24px!important;
    height:24px!important;
    flex-basis:24px!important;
    padding:3px!important;
  }
  .actions-light-track i{
    width:16px!important;
    height:16px!important;
    flex-basis:16px!important;
  }
  .actions-light-label{font-size:11px}
}
@media(max-width:390px){
  .brand-lockup{flex:1 1 180px}
  .repo-link{width:32px;height:34px;flex-basis:32px}
  .console-link{width:36px;height:36px;flex-basis:36px}
  .repo-link svg{width:20px;height:20px}
  .console-link svg{width:27px;height:27px}
  .actions-light{min-width:94px!important;padding:0 8px!important;gap:7px!important}
  .actions-light-label{font-size:10px}
}


/* WAKE WORDMARK GRADIENT — 2026-10-04 */
.masthead .wordmark,
.brand-lockup .wordmark{
  color:transparent!important;
  background:linear-gradient(90deg,#20e2ed 0%,#5aa5ff 48%,#d84dff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.masthead .wordmark .asterisk,
.brand-lockup .wordmark .asterisk{
  color:inherit!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:none!important;
}
.masthead .wordmark small,
.brand-lockup .wordmark small{
  color:var(--muted)!important;
  -webkit-text-fill-color:var(--muted)!important;
  background:none!important;
}


/* CLEAN READ LABEL — 2026-10-04 */
/* The Read label stands on its own; the dropdown remains clickable without a chevron/caret. */
.compact-nav summary::after{
  content:none!important;
  display:none!important;
}
.compact-nav summary{
  gap:0!important;
}

/* IPHONE SHARED FOOTER + TYPE — 2026-10-04 */
.footer-powered-wrap{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  width:min(1320px,calc(100% - 44px));
  margin:18px auto 28px;
  padding:0;
}
.footer-powered{
  display:inline-block;
  color:var(--muted)!important;
  font:9px/1.3 var(--mono)!important;
  letter-spacing:.08em!important;
  text-decoration:none!important;
}
@media(max-width:700px){
  html{font-size:101.5%}
  .footer-powered-wrap{
    width:calc(100% - 12px);
    margin:14px auto 22px;
  }
}

/* MOBILE MASTHEAD UNIFICATION — 2026-10-04
   Public site and Console use the same top offset and centered three-item nav. */
@media(max-width:760px){
  body>header.masthead,
  .research-page>.research-header.masthead{
    margin-top:8px!important;
  }
  body>header.masthead nav.compact-nav,
  .research-page>.research-header.masthead nav.compact-nav,
  .masthead nav.compact-nav,
  nav.compact-nav{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    column-gap:10px!important;
    justify-items:center!important;
  }
  body>header.masthead nav.compact-nav>a,
  .research-page>.research-header.masthead nav.compact-nav>a,
  body>header.masthead nav.compact-nav .nav-group>summary,
  .research-page>.research-header.masthead nav.compact-nav .nav-group>summary,
  .masthead nav.compact-nav>a,
  .masthead nav.compact-nav .nav-group>summary{
    justify-content:center!important;
    text-align:center!important;
    font-size:13px!important;
  }
}
@media(max-width:390px){
  body>header.masthead nav.compact-nav>a,
  .research-page>.research-header.masthead nav.compact-nav>a,
  body>header.masthead nav.compact-nav .nav-group>summary,
  .research-page>.research-header.masthead nav.compact-nav .nav-group>summary{
    font-size:12px!important;
  }
}

