/* ─────────────────────────────────────────────────────────────────────────
   The bottom tab bar.

   One stylesheet, loaded by two different kinds of page: the app links it from
   index.html, every generated document links it from renderPage. It is in
   public/ rather than src/ for that reason — src/styles.css reaches the app
   alone, public/content.css reaches the documents alone, and a bar that is
   supposed to be identical in both places cannot live in either.

   Phone only. Above 900px both surfaces already have a real navigation in the
   header — the app its topnav, the documents their site-nav — and a fixed bar
   across the foot of a desktop window is a phone habit.
   ───────────────────────────────────────────────────────────────────────── */

/* The bar's own height, declared here because this is the file both surfaces
   load. src/styles.css reads it into `--rail-h`, which is what the app's
   scroll container already reserves at the foot of every screen — so the two
   cannot disagree and nothing has to be kept in step by hand. */
:root { --tabbar-h: 62px; }

.tabbar { display: none; }

@media (max-width: 899px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    display: grid; grid-template-columns: repeat(5, 1fr);
    align-items: end;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--line);
  }

  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: 4px;
    height: var(--tabbar-h); padding-bottom: 10px;
    color: var(--ink-3); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar a span {
    font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    font-family: var(--sans, inherit);
  }
  .tabbar a[aria-current='page'] { color: var(--ink); }
  .tabbar a svg { transition: transform .3s cubic-bezier(.22,1,.36,1); }
  .tabbar a:active svg { transform: scale(.86); }

  /* The dot the app's own tab bar uses for the active tab, so switching
     between a document and the app does not switch visual languages. */
  .tabbar a { position: relative; }
  /* Offsets, not just `position: absolute` — without them the dot takes its
     static position, which is the end of the flex column, and the marker for
     the current tab appears underneath its label instead of above its icon. */
  .tabbar a[aria-current='page']::before {
    content: '';
    position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
  }

  /* ── the centre ────────────────────────────────────────────────────
     Lifted out of the bar and filled with the accent. It is the only
     destination on the site that everything else is written to send people
     to, and it is a word rather than an icon because "4XL" says what this
     site is for in three characters. */
  .tabbar .tabbar-centre {
    align-self: center;
    justify-content: center;
    gap: 0;
    height: 52px; width: 52px; padding: 0;
    margin: -20px auto 0;
    border-radius: 50%;
    background: var(--accent); color: var(--accent-ink);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 38%, transparent);
  }
  .tabbar .tabbar-centre span {
    font-size: 14px; font-weight: 700; letter-spacing: -.02em; text-transform: none;
  }
  /* The accent is already the whole button; a dot on top of it is noise. */
  .tabbar .tabbar-centre[aria-current='page']::before { content: none; }
  .tabbar .tabbar-centre[aria-current='page'] {
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 38%, transparent),
                0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
  }

  /* Nothing may end up underneath it. The documents scroll the window; the app
     scrolls an inner element and sets its own padding, so this only has to
     clear the bar for the pages that use `body`. */
  body:has(.tabbar) { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 8px); }
}

@media print { .tabbar { display: none !important; } }