/* THE NAV, ONE COMPONENT FOR EVERY SKAIL SITE (the owner, 2026-09-30: "a standardized nav desktop and mobile
   for all SKAIL sites"): skailstudio.com, orgomedia.ai and nowlark.com.

   CANONICAL COPY: SkailSites/shared/nav.css. Each site serves a copy at /assets/nav.css, written by
   `python3 sync_shared.py install` and held to this file byte for byte by test_shared_is_in_sync.py (in
   SkailSites) and test_the_nav_is_the_shared_one.py (in Nowlark). Edit it here, never in a copy.

   The rules it keeps (the owner, 2026-10-17: rules-kit shared/admin-console.md, "Top bar", and the site
   navigation rule), in the pattern PageSoar's nav shares (frontdoor/fd_site.py nav()):
   - at most 5 items besides the logo and the call to action (test_nav_link_count.py); more destinations go in a
     dropdown, a <details class="nav-drop">, which counts as one item;
   - the call to action is the bar's one filled control, at its right end, and the phone panel ends with it;
   - one list, two places: nav.js writes the phone panel from the bar's own links and call to action, so the two
     cannot differ (a dropdown becomes a headed group there);
   - the page's own link carries aria-current="page" and is drawn apart from a hover (--nav-current), and a
     dropdown holding it is marked the same way.

   A Liquid Glass pill, pinned near the top, hugging its contents; under 860px the logo and a three-bar toggle,
   the toggle turning to an X and opening the panel. A site changes only the theme, through these custom
   properties (defaults are a dark theme):
     --nav-fill --nav-edge --nav-highlight --nav-shadow   the glass
     --nav-ink                                            link and bar colour
     --nav-muted                                          a dropdown item's description, a phone group's heading
     --nav-hover                                          a link's hover background
     --nav-current                                        the current page's (and an open dropdown's) background
     --nav-panel                                          the dropdown's and the phone panel's (solid) background
     --nav-ring                                           the keyboard focus ring
     --nav-font                                           the one font
   Markup:
     <header class="nav"><div class="navbar">
       <a class="nav-logo" href="/">…</a>
       <nav class="nav-links" aria-label="Main">
         <a href="…">…</a>                                                            (a link)
         <details class="nav-drop"><summary>Resources</summary><div class="nav-drop-panel">
           <a href="…">Guide<span class="nav-drop-d">one line on what is there</span></a> …</div></details>
       </nav>
       <a class="nav-cta …site's button classes…" href="…">…</a>        (optional; a <button> works too)
       <button class="nav-toggle" type="button" aria-controls="nav-menu" aria-expanded="false" aria-label="Open menu">
         <span class="bar top"></span><span class="bar mid"></span><span class="bar bot"></span></button>
       <nav class="nav-menu" id="nav-menu" aria-label="Menu" hidden></nav>        (written by nav.js)
     </div></header>
   with /assets/nav.js. */

.nav {
  --nav-fill: rgba(28, 28, 30, .52);
  --nav-edge: rgba(255, 255, 255, .14);
  --nav-highlight: rgba(255, 255, 255, .22);
  --nav-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --nav-ink: #f4f4f4;
  --nav-muted: rgba(244, 244, 244, .64);
  --nav-hover: rgba(255, 255, 255, .07);
  --nav-current: rgba(255, 255, 255, .15);
  --nav-panel: #0b0b0c;
  --nav-ring: rgba(255, 255, 255, .85);
  --nav-font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  position: fixed; top: max(16px, env(safe-area-inset-top)); left: 0; right: 0; z-index: 50;
  display: flex; justify-content: center; padding: 0 16px; pointer-events: none;
  font-family: var(--nav-font);
}
.navbar {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 60px; max-width: 100%;
  padding: 8px 14px; border-radius: 32px; pointer-events: auto;
  background: var(--nav-fill); border: 1px solid var(--nav-edge);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--nav-highlight), inset 0 -1px 0 rgba(255, 255, 255, .03), var(--nav-shadow);
}
/* even inside the pill (orgomedia.ai items 134, 193): the logo and the call to action (the toggle on phones)
   each 15px from the pill's edge, the 14px padding plus the 1px border. */
/* once the page scrolls, a frosted band sits behind the pill, so text scrolling under it never shows sharp beside it
   ("The" peeked out left of the pill on orgomedia.ai/changelog). At the top it is clear, so a hero runs up to the
   window's edge. nav.js sets html.nav-scrolled past 8px. The band is a heavy blur under a veil of the page's own
   background, solid to a little below the pill and faded out after: an opaque band with a hard edge sliced lines of
   text in two and laid a black slab over orgomedia.ai's purple launch section, and blur alone left headings as grey
   ghosts beside the pill and lines still readable against its bottom edge (board, 2026-10-23). */
.nav::after {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: calc(max(16px, env(safe-area-inset-top)) + 128px);
  z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--nav-panel, #000) 75%, transparent);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent);
  opacity: 0; transition: opacity .2s ease;
}
.nav-scrolled .nav::after { opacity: 1; }
.nav-logo { display: flex; align-items: center; gap: 10px; margin-right: 10px; flex: none; color: var(--nav-ink); text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.nav-logo img { height: 30px; width: auto; display: block; }
/* an inline SVG mark is square: width:auto would resolve it to 300px */
.nav-logo svg { height: 30px; width: 30px; display: block; flex: none; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a, .nav-menu a:not(.nav-menu-cta), .nav-drop > summary {
  padding: 10px 14px; border-radius: 24px; text-decoration: none; color: var(--nav-ink);
  font: 500 15px/1.2 var(--nav-font); white-space: nowrap; transition: background-color .18s ease;
}
.nav-links a:hover, .nav-drop > summary:hover { background: var(--nav-hover); }
.nav-links > a[aria-current="page"], .nav-drop:has([aria-current="page"]) > summary { background: var(--nav-current); }
/* an open dropdown is drawn as a pressed control (a ring), so it never reads as "you are here" */
.nav-drop[open] > summary { box-shadow: inset 0 0 0 1px var(--nav-edge); }
.nav-drop[open]:not(:has([aria-current="page"])) > summary { background: var(--nav-hover); }
.nav a:focus-visible, .nav button:focus-visible, .nav-drop > summary:focus-visible { outline: 2px solid var(--nav-ring); outline-offset: 2px; }
/* the call to action: the bar's one filled control. Its geometry is the nav's, so every site's matches; its colour
   and type are the site's own button's (its .nav-cta rule styles the phone panel's copy too). Scoped to the bar's
   own child so a site's .btn rule (loaded after this sheet) cannot resize it. */
.navbar > .nav-cta { margin-left: 6px; white-space: nowrap; flex: none; min-height: 44px; padding: 0 20px; border-radius: 22px; }

/* a dropdown: one item in the bar, its links in a panel under it */
.nav-drop { position: relative; }
.nav-drop > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary::after {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.nav-drop[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.nav-drop-panel {
  position: absolute; top: calc(100% + 16px); left: -8px; width: max-content; min-width: 280px; max-width: 340px;
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
  border-radius: 20px; border: 1px solid var(--nav-edge); background: var(--nav-panel); box-shadow: var(--nav-shadow);
}
.nav-drop:not([open]) > .nav-drop-panel { display: none; }
.nav-links .nav-drop-panel a { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; white-space: normal; }
.nav-links .nav-drop-panel a[aria-current="page"] { background: var(--nav-current); }
.nav-drop-d { color: var(--nav-muted); font-size: 13.5px; font-weight: 400; line-height: 1.35; }

.nav-toggle {
  display: none; position: relative; width: 48px; height: 48px; border-radius: 50%; padding: 0; flex: none;
  border: 1px solid var(--nav-edge); background: rgba(255, 255, 255, .04); cursor: pointer;
}
.nav-toggle .bar {
  position: absolute; height: 1.5px; border-radius: 1px; background: var(--nav-ink);
  transition: transform .3s ease, top .3s ease, opacity .2s ease;
}
.nav-toggle .top, .nav-toggle .bot { width: 22px; left: calc(50% - 11px); }
.nav-toggle .top { top: 17px; }
.nav-toggle .mid { width: 13px; right: 12px; top: calc(50% - .75px); }
.nav-toggle .bot { top: 29px; }
.nav-toggle[aria-expanded="true"] .top { top: calc(50% - .75px); transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bot { top: calc(50% - .75px); transform: rotate(-45deg); }
.nav-toggle[aria-expanded="true"] .mid { opacity: 0; }
/* the phone panel: the bar's links, a dropdown as a headed group, then the call to action at full width */
.nav-menu {
  position: absolute; top: calc(100% + 8px); left: -1px; right: -1px; padding: 10px; display: none; flex-direction: column;
  max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain;
  border-radius: 24px; border: 1px solid var(--nav-edge); background: var(--nav-panel); box-shadow: var(--nav-shadow);
  transition: opacity .2s ease, transform .2s ease;
}
/* the call to action's copy is left out: its type and colour stay the site's button's, as in the bar */
.nav-menu a:not(.nav-menu-cta) { padding: 14px 16px; font-size: 17px; }
.nav-menu a:not(.nav-menu-cta):hover { background: var(--nav-hover); }
.nav-menu a[aria-current="page"] { background: var(--nav-current); }
.nav-menu-group { display: flex; flex-direction: column; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--nav-edge); }
.nav-menu-h { padding: 10px 16px 4px; color: var(--nav-muted); font: 500 13px/1.2 var(--nav-font); }
.nav-menu .nav-menu-cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 10px 0 0; padding: 0 20px; border-radius: 24px; }

@media (max-width: 860px) {
  /* .navbar-scoped so a site's own button rule (.btn, loaded after this sheet) cannot bring the call to
     action back into the phone bar */
  .navbar .nav-links, .navbar > .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .navbar { width: 100%; justify-content: space-between; padding: 6px 14px; min-height: 0; }
  .nav-menu:not([hidden]) { display: flex; }
  @starting-style { .nav-menu:not([hidden]) { opacity: 0; transform: translateY(-6px); } }
  /* behind the open panel, the page is dimmed and held still; a tap on it closes the menu (nav.js) */
  .nav:has(.nav-menu:not([hidden]))::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: auto;
    background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  html:has(.nav-menu:not([hidden])) { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle .bar, .nav-links a, .nav-menu, .nav-menu a, .nav-drop > summary, .nav-drop > summary::after, .nav::after { transition: none; }
}