/*
  Copyright (c) 2024-2026 Louis, narubox, Austin, Texas
  public-nav.css — The one place the public header and footer are styled.

  The markup already lived in a shared include, but each layout carried its own
  copy of the CSS, so the two drifted: base-doc.html had no .btn rule at all and
  the Dashboard / Get started button fell back to a bare link on /about and
  /insights while looking like a button on the landing page.

  Both layouts scope their nav differently — `nav` on the landing page,
  `nav.top` elsewhere — so selectors here match the shared class names rather
  than the element, which is what makes one file able to serve both.

  The colour variables (--ink, --line, --violet …) are defined by each layout.
  This file only assumes they exist, so a layout can restyle its own ground
  without the header falling out of step.
*/

.mark { display: inline-flex; align-items: center; }
.mark img { height: 23px; width: auto; display: block; }

/* The wordmark ships in two inks: white for the dark ground, navy for light. */
.mark .on-dark { display: block; }
.mark .on-light { display: none; }
@media (prefers-color-scheme: light) {
  .mark .on-dark { display: none; }
  .mark .on-light { display: block; }
}
:root[data-theme="light"] .mark .on-dark { display: none; }
:root[data-theme="light"] .mark .on-light { display: block; }
:root[data-theme="dark"] .mark .on-dark { display: block; }
:root[data-theme="dark"] .mark .on-light { display: none; }

a.nl {
  font-size: 15.5px; font-weight: 550; color: var(--ink-2);
  text-decoration: none; white-space: nowrap;
}
a.nl:hover { color: var(--ink); text-decoration: none; }

.push { margin-left: auto; }

/* The button. Every public page gets this shape, filled — an outlined button
   next to plain text links reads as secondary, and "Dashboard" is the thing we
   most want a signed-in visitor to reach. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; padding: 10px 18px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: border-color .16s, transform .16s, background .16s, filter .16s;
}
.btn:hover { border-color: var(--ink-4); text-decoration: none; }

.btn.solid,
nav .btn, nav.top .btn {
  background: var(--violet); border-color: var(--violet); color: #0b0b0d;
  box-shadow: 0 6px 22px rgba(167,139,250,.18);
}
:root[data-theme="light"] .btn.solid,
:root[data-theme="light"] nav .btn,
:root[data-theme="light"] nav.top .btn { color: #fff; }
@media (prefers-color-scheme: light) {
  .btn.solid, nav .btn, nav.top .btn { color: #fff; }
}
:root[data-theme="dark"] .btn.solid,
:root[data-theme="dark"] nav .btn,
:root[data-theme="dark"] nav.top .btn { color: #0b0b0d; }

.btn.solid:hover,
nav .btn:hover, nav.top .btn:hover { transform: translateY(-1px); filter: brightness(1.06); }

.btn:focus-visible, a:focus-visible {
  outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn.solid:hover, nav .btn:hover, nav.top .btn:hover { transition: none; transform: none; }
}