/* ===========================================================================
   WRKLS shared shell — navigation + safe area
   Loaded by all four tools. Static, no build, no dependencies.

   SCOPE, DELIBERATELY NARROW
   This file controls navigation LAYOUT/VISIBILITY and safe-area insets only.
   It does not style link colours, borders, radii, or typography — each tool
   keeps its own look (the root tools' monospace utility chrome, Events' sans
   card UI). That is why it can be dropped into four differently-styled pages
   without a refactor.

   PROGRESSIVE ENHANCEMENT
   Markup is untouched: wrkls-shell.js finds nav[data-wrkls-nav], wraps the
   existing links, and injects the toggle. With JS off, the nav renders exactly
   as it did before (a wrapping row of links) — nothing is hidden behind a
   control that cannot open.
   =========================================================================== */

:root {
  /* One place to change the breakpoint for every tool. */
  --wnav-break: 720px;
  --wnav-accent: #7c5cff;
}

/* ── Toggle button (hidden until JS enhances + narrow viewport) ───────────── */

.wnav__toggle {
  display: none;               /* shown by the media query below */
  align-items: center;
  gap: 8px;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  color: inherit;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 9px 12px;
  cursor: pointer;
  /* Comfortable tap target regardless of host page font sizing. */
  min-height: 40px;
}

.wnav__toggle:hover { border-color: var(--wnav-accent); }

.wnav__toggle[aria-expanded="true"] {
  border-color: var(--wnav-accent);
  background: rgba(124, 92, 255, 0.16);
}

.wnav__bars {
  display: inline-block;
  width: 15px;
  height: 11px;
  position: relative;
  flex: none;
}
.wnav__bars::before,
.wnav__bars::after,
.wnav__bars span {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}
.wnav__bars::before { top: 0; }
.wnav__bars span    { top: 50%; transform: translateY(-50%); }
.wnav__bars::after  { bottom: 0; }

/* ── Desktop / wide: plain horizontal nav, exactly as before ──────────────── */

@media (min-width: 720px) {
  .wnav__toggle { display: none !important; }
  /* The list is a transparent pass-through so each page's own nav rules
     (flex, gap, wrapping) keep applying unchanged. */
  .wnav__list { display: contents; }
}

/* ── Mobile / narrow: collapse behind the toggle ──────────────────────────

   THREE THINGS THIS BLOCK GETS RIGHT (all were wrong in v0.2.5):

   1. The panel is OUT OF FLOW. It was `display:none -> flex` as an in-flow
      block, so opening the menu grew the nav and pushed every page below it
      down. It is now absolutely positioned, so opening and closing causes
      zero vertical layout shift.

   2. The panel is ANCHORED TO THE TRIGGER. As an in-flow block it spanned the
      nav's full width and read as a detached slab on the left while the
      trigger sat top-right. It now hangs from the nav's right edge, directly
      under the button, sized to its content.

   3. The trigger STAYS INSIDE THE SAFE-AREA PADDING. Previously the toggle was
      absolutely positioned to `top: 0` of the header. An absolutely positioned
      box resolves against its ancestor's PADDING BOX, so `top: 0` sits ABOVE
      the header's padding-top — i.e. exactly in the iOS status bar, where part
      of the button is covered by system UI and cannot be tapped.

      Placement is now explicit per page, via data-wrkls-nav:
        "corner" — nav sits below other header content (the three root tools),
                   so the whole nav is parked at the header's top-right. Those
                   headers live INSIDE .wrap, which already carries their
                   safe-area padding, so top:0 there is already below the inset.
        "inline" — nav already sits beside the wordmark in a flex row (Events),
                   so it is left in normal flow and inherits the header's
                   safe-area padding automatically. Nothing is absolutely
                   positioned out of the padded area.
   ------------------------------------------------------------------------- */

@media (max-width: 719px) {
  .wnav--ready .wnav__toggle { display: inline-flex; }

  /* The nav is the containing block for the dropdown in both placements. */
  .wnav--ready {
    position: relative;
    z-index: 60;
  }

  /* "corner": park the whole nav at the header's top-right. The header is
     inside the page's safe-area-padded wrapper, so this stays clear of the
     status bar and the trigger remains fully tappable. */
  .wnav-host { position: relative; }
  .wnav-host .wnav--corner {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
  }

  /* "inline": nothing to do — the nav keeps its place in the header row. */

  .wnav--ready .wnav__list {
    display: none;
    position: absolute;        /* out of flow: no layout shift on open */
    top: calc(100% + 6px);     /* directly beneath the trigger */
    right: 0;                  /* right-aligned to the trigger/header edge */
    left: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 6px;
    background: rgba(10, 8, 16, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
    z-index: 70;
    /* Only as wide as the longest tool name, never wider than the viewport. */
    width: max-content;
    min-width: 180px;
    max-width: min(86vw, 320px);
    box-sizing: border-box;
  }

  .wnav--ready[data-open="true"] .wnav__list { display: flex; }

  .wnav--ready .wnav__list > a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    line-height: 1.4;
    padding: 12px 14px;
    text-align: left;
    white-space: nowrap;
  }
}

/* ── Safe area ────────────────────────────────────────────────────────────
   The three original tools already pad .wrap with
   calc(26px + env(safe-area-inset-top, 0px)); this block is the same idea
   expressed once, for any page that opts in with .wrkls-safe-top.

   env() returns 0px in browsers without insets and in non-standalone Safari
   on most devices, so the browser view gains NO extra blank space — the
   padding only grows where iOS actually reports an inset (installed PWA,
   notch/Dynamic Island). That is why the base value is kept small and the
   inset is added rather than substituted.                                     */

.wrkls-safe-top {
  padding-top: calc(var(--wrkls-safe-base, 12px) + env(safe-area-inset-top, 0px));
}
.wrkls-safe-bottom {
  padding-bottom: calc(var(--wrkls-safe-base-bottom, 0px) + env(safe-area-inset-bottom, 0px));
}
.wrkls-safe-x {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* ── Motion / focus ──────────────────────────────────────────────────────── */

.wnav__toggle:focus-visible,
.wnav__list > a:focus-visible {
  outline: 2px solid var(--wnav-accent);
  outline-offset: 2px;
}

/* ── Shared public footer ──────────────────────────────────────────────────
   Used by every public page. Self-contained: it declares its own colours
   rather than leaning on page-level custom properties, because the root tools
   and Events define different palettes. Deliberately quiet — the legal line is
   the smallest, faintest thing on the page, and the whole block is secondary
   to whatever tool sits above it.                                            */

.wfoot {
  /* Neutralise host-page rules on the bare `footer` element. Coords → GPX and
     Coordinate Converter style `footer` with uppercase, centred, wide-tracked
     text for their old one-line footer; those properties are not declared by
     this component, so without resetting them they would inherit here and
     shout the whole block in caps. */
  text-align: left;
  text-transform: none;
  letter-spacing: normal;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 28px;
  padding: 18px 0 max(30px, env(safe-area-inset-bottom, 0px));
  font-size: 0.78rem;
  line-height: 1.5;
  color: #7c7c86;
}

.wfoot__inner {
  max-width: 760px;
  margin: 0 auto;
  padding-inline: 16px;
}

.wfoot__id { margin: 0 0 8px; }

.wfoot__name {
  display: block;
  color: #b4b4bb;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Link row. Separators are generated so the markup stays a plain list of
   anchors and a tool can be added or removed without editing punctuation. */
.wfoot__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin: 0 0 10px;
}
.wfoot__links a {
  color: #b4b4bb;
  text-decoration: none;
  padding: 3px 0;
}
.wfoot__links a:hover { color: #c9a2ff; }
.wfoot__links a:not(:last-child)::after {
  content: "·";
  color: #55555e;
  margin-left: 6px;
}
.wfoot__links a.is-here { color: #c9a2ff; }

/* Events-specific attribution sits here, above the shared legal line. */
.wfoot__note { margin: 0 0 8px; max-width: 70ch; }

.wfoot__legal {
  margin: 0;
  max-width: 70ch;
  font-size: 0.72rem;
  color: #5f5f68;
}

.wfoot a { color: inherit; }
.wfoot__note a, .wfoot__legal a { color: #8b8b95; }

.wfoot :focus-visible { outline: 2px solid #7c5cff; outline-offset: 2px; }