/* hub-nav.v1 — corner back arrow that opens a hub switcher.
   Self-contained: reads the --hub-* contract when present, falls back to neutral values on leaf pages. */
.hub-nav {
  --hn-bg:      var(--hub-surface, #1d1d22);
  --hn-ink:     var(--hub-ink, #ececf1);
  --hn-soft:    var(--hub-ink-soft, #9a9aa6);
  --hn-rule:    var(--hub-rule, rgba(127,127,140,.35));
  --hn-accent:  var(--hub-accent, #d4a64a);
  --hn-font:    var(--hub-font-ui, system-ui, sans-serif);
  --hn-size:    2.75rem;
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  z-index: 9000;
  font-family: var(--hn-font);
}
.hub-nav__up {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--hn-size);
  height: var(--hn-size);
  border-radius: 50%;
  border: 1px solid var(--hn-rule);
  background: var(--hn-bg);
  color: var(--hn-ink);
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  transition: border-color .18s, color .18s, transform .18s;
}
.hub-nav__up svg { width: 1.2rem; height: 1.2rem; }
.hub-nav__up:hover, .hub-nav.is-open .hub-nav__up { border-color: var(--hn-accent); color: var(--hn-accent); }

.hub-nav__panel {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 15rem;
  padding: calc(var(--hn-size) + .5rem) .4rem .4rem;
  border: 1px solid var(--hn-rule);
  border-radius: calc(var(--hn-size) / 2) 14px 14px 14px;
  background: var(--hn-bg);
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(.97);
  transform-origin: top left;
  /* the delay on close is the grace period for a mouse that overshoots the panel */
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  transition-delay: .25s;
}
.hub-nav:hover .hub-nav__panel,
.hub-nav:focus-within .hub-nav__panel,
.hub-nav.is-open .hub-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
  transition-delay: 0s;
}
.hub-nav.is-closed .hub-nav__panel { opacity: 0; visibility: hidden; transition-delay: 0s; }

.hub-nav__label {
  position: absolute;
  top: calc(var(--hn-size) / 2);
  left: calc(var(--hn-size) + .7rem);
  transform: translateY(-50%);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hn-soft);
  white-space: nowrap;
}
.hub-nav__list { list-style: none; margin: 0; padding: 0; }
.hub-nav__list li[hidden] { display: none; }
.hub-nav__sep { height: 1px; margin: .35rem .6rem; background: var(--hn-rule); }
.hub-nav__link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .7rem;
  border-radius: 9px;
  color: var(--hn-ink);
  font-size: .95rem;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.hub-nav__ic { width: 1.4rem; text-align: center; flex: none; }
.hub-nav__link:hover, .hub-nav__link:focus-visible {
  background: color-mix(in srgb, var(--hn-accent) 16%, transparent);
  color: var(--hn-accent);
  outline: none;
}
.hub-nav__link--up { font-weight: 600; }
.hub-nav__link[aria-current="page"] { color: var(--hn-soft); cursor: default; background: none; }
.hub-nav__link[aria-current="page"]::after { content: "here"; margin-left: auto; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.hub-nav__up:focus-visible { outline: 2px solid var(--hn-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .hub-nav__panel, .hub-nav__up { transition: none !important; }
}
@media print { .hub-nav { display: none; } }
.hub-nav__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hub-nav, .hub-nav * { box-sizing: border-box; }