/*
 * Minimal shared shadow-root reset, prepended once to the bundled
 * `ds.css` every component links to (see `scripts/build-ds-css.mjs` in
 * src). The design-system skill requires a single global reset
 * (`global.css`), but that is light-DOM only and cannot reach into a
 * shadow root. This is the shadow-DOM equivalent: box-sizing plus a
 * token-driven focus ring.
 *
 * Focus-ring color on inverse surfaces is not handled with `:host-context`
 * here: `ds-section[data-surface="inverse"]` re-points the
 * `--elvaio-color-focus` custom property for its whole subtree, and every
 * component (light or shadow DOM) that reads that token for its focus ring
 * inherits the override automatically, because custom properties inherit
 * through shadow boundaries.
 */
:host {
  box-sizing: border-box;
}

:host *,
:host *::before,
:host *::after {
  box-sizing: border-box;
}

:host(:focus-visible) {
  outline: var(--elvaio-focus-width) solid var(--elvaio-color-focus);
  outline-offset: 2px;
  border-radius: var(--elvaio-radius-field);
}


:host {
  display: block;
  position: relative;
  z-index: 20;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--elvaio-space-04);
  min-height: 4.5rem;
}

.links,
.actions {
  display: none;
}

.toggle {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--elvaio-color-card);
  border: 1.5px solid var(--elvaio-color-border-control);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--elvaio-color-text);
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
}

a {
  color: var(--elvaio-color-text);
  text-decoration: none;
}

.panel {
  position: fixed;
  margin: 0;
  width: 100%;
  max-height: 100vh;
  overflow-y: auto;
  inset: 4.5rem 0 auto 0;
  border: 0;
  border-top: 1px solid var(--elvaio-color-border-decorative);
  padding: var(--elvaio-space-04) var(--elvaio-space-gutter) var(--elvaio-space-07);
  background: var(--elvaio-color-page);
}

.panel ul {
  flex-direction: column;
}

.panel a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 3.75rem;
  border-bottom: 1px solid var(--elvaio-color-border-decorative);
  font-family: var(--elvaio-font-title);
  font-weight: var(--elvaio-font-weight-title);
  font-size: var(--elvaio-font-size-title-body);
  letter-spacing: -0.02em;
}

.panel a[aria-current='page'] {
  color: var(--elvaio-color-accent-text);
}

.panel-actions {
  display: flex;
  flex-direction: column;
  gap: var(--elvaio-space-03);
  padding-top: var(--elvaio-space-04);
}

.panel-actions ::slotted(*) {
  width: 100%;
}

@media ((min-width: 75rem)) {
  .bar {
    min-height: 6.25rem;
  }

  .links {
    display: flex;
  }

  ul {
    position: relative;
    gap: 2px;
    background: var(--elvaio-color-card);
    border: 1px solid var(--elvaio-color-border-decorative);
    border-radius: var(--elvaio-radius-pill);
    padding: var(--elvaio-space-02);
  }

  /* Out of flow (and `aria-hidden`): doesn't take up a list slot or count
     toward the links' `li` total for assistive tech. */
  .nav-pill-item {
    position: absolute;
    inset: 0;
    width: 0;
    height: 0;
  }

  /* Positioned as a child of `ul`, not a sibling: that keeps it painted
     above `ul`'s own opaque background automatically (a box's background
     always paints below its own children) without having to juggle
     z-index against that background. `.links a` below still needs its
     own `z-index` so its label paints above this. JS (nav-pill-enhance)
     sets width/height/transform; this just animates getting there. */
  .nav-pill {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: var(--elvaio-radius-pill);
    background: var(--elvaio-color-band);
    opacity: 0;
    pointer-events: none;
    transform: translate(0, 0);
    transition:
      transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
      width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
      height 0.3s ease,
      opacity 0.15s ease;
  }

  .nav-pill.is-visible {
    opacity: 1;
  }

  .links a {
    position: relative;
    z-index: 1;
    padding: var(--elvaio-space-03) var(--elvaio-space-04);
    border-radius: var(--elvaio-radius-pill);
  }

  /* No-JS / pre-hydration fallback only: once nav-pill-enhance wires up
     the shared sliding pill it adds `.has-pill`, which suppresses this so
     the two highlights don't show at once. */
  .links:not(.has-pill) a:hover {
    background: var(--elvaio-color-band);
  }

  .links a[aria-current='page'] {
    background: var(--elvaio-color-text);
    color: var(--elvaio-color-text-inverse);
  }

  /* The current-page background is just the anchor's own padding box, so
     on the first/last item it's inset from the capsule's rounded edge by
     `ul`'s own padding - the same gap `nav-pill-enhance` closes for the
     hover pill, but this is a plain CSS state with no JS involved, so it
     needs its own fix: bleed the anchor past its box on that one side
     (negative margin) and grow its padding by the same amount so the
     label text doesn't shift, extending the background flush to the
     capsule's padding edge. `li:first-child` is `.nav-pill-item`
     (aria-hidden, out of flow), so the first real item is the next `li`. */
  .links ul li:first-child + li > a[aria-current='page'] {
    margin-left: calc(-1 * var(--elvaio-space-02));
    padding-left: calc(var(--elvaio-space-04) + var(--elvaio-space-02));
  }

  .links ul li:last-child > a[aria-current='page'] {
    margin-right: calc(-1 * var(--elvaio-space-02));
    padding-right: calc(var(--elvaio-space-04) + var(--elvaio-space-02));
  }

  .bar > .actions {
    display: flex;
    gap: var(--elvaio-space-03);
  }

  .toggle,
  .panel {
    display: none;
  }
}

/* Shadow-root styles aren't reached by `global.css`'s page-level
   `*`-selector reduced-motion rule, so the pill needs its own: motion is
   decorative here (the highlight still appears, just without the slide),
   unlike the button spinner's reduced-but-not-removed duration. */
@media (prefers-reduced-motion: reduce) {
  .nav-pill {
    transition: opacity 0.15s ease;
  }
}