/* =============================================================================
   TerraNav.css  -  THE navbar. One definition, used by every page except the app.
   -----------------------------------------------------------------------------
   WHY THIS FILE EXISTS
     The nav used to be defined TWICE - once in TerraLanding.css (login, pricing,
     checkout, subscribed, admin, disclaimer, reset-password) and again in
     TerraLandingPage.css (the landing page, which has its own design system).
     Same class names, two sets of rules, two sets of colour tokens.

     That is not a tidiness problem, it is a correctness one. The duplicate
     .nav-brand in TerraLandingPage.css carried the comment "copied verbatim from
     TerraLanding.css ... If that rule ever changes there, change it here too",
     which is a maintenance instruction no one will ever follow. And when the T
     mark was added it needed OPPOSITE recolouring rules in the two files, because
     each sheet's accent runs light-on-dark the other way round. Two files, two
     answers, both correct, impossible to reason about.

     So: one file, one definition, imported by every public page. The app
     (TerraFrontEnd) is deliberately NOT included - its banner is scheme-specific
     and themed from the appraisal, which is a genuinely different thing.

   HOW PAGES CUSTOMISE IT
     This file styles the nav entirely from --nav-* tokens, with the defaults
     below. A page that needs different colours redefines the tokens in its own
     stylesheet; it must not redefine the rules. The tokens are the contract.

       --nav-bg          bar background
       --nav-border      bottom rule
       --nav-brand       wordmark colour
       --nav-link        nav link colour
       --nav-link-hover  nav link hover colour
       --nav-accent      solid button background
       --nav-accent-hover
       --nav-on-accent   text/icon colour ON the solid button
       --nav-ghost       ghost button text colour
       --nav-t-src       WHICH T artwork to draw (see below)
       --nav-t-src-on-accent  the one for a solid accent button

   THE T MARK
     THREE PIECES OF ARTWORK, CHOSEN BY WHAT IS BEHIND THE MARK. Each is the T
     on a transparent background, so it carries no tile of its own and sits on
     whatever the bar is painted:

       dark nav bar          light grey on clear
       light nav bar         dark grey on clear
       a solid accent button white on clear   (the button is dark in EVERY
                                               theme, so this does not vary)

     ⚠️ THIS USED TO BE ONE DARK PNG AND A CSS `filter` THAT INVERTED IT. Real
     artwork replaced it because a filter has to GUESS: `invert(1)` on a dark
     grey gives a light grey of whatever value the arithmetic lands on, not the
     one the mark was designed in, and the two greys here are deliberate. It
     also removes a whole class of bug - a filter token that resolved to the
     wrong value flipped the mark to white in BOTH themes and went unnoticed,
     because on every page but one the mark sits on a solid button with its own
     rule.

     ⚠️ THE FILES LIVE HERE, NOT IN styles/TerraTheme.css, even though that
     sheet owns every other themed value. TerraTheme.css is INLINED WHOLESALE
     into the self-contained Quick Start guide that the welcome email attaches
     (backend/quickStartAttachment.js), where a url() would point at a file the
     recipient does not have. A colour survives that journey; a file reference
     does not. The light override below therefore sits in this sheet, on the
     same `:root[data-theme='light']` selector TerraTheme.css uses, so it still
     wins over the plain `:root` default regardless of load order.
   ============================================================================= */

:root {
  /* Defaults suit the shared dark public-page chrome. Individual sheets override
     the tokens they need - see TerraLandingPage.css for a worked example where
     nearly all of them differ. */
  --nav-bg: var(--surface, #1c2226);
  --nav-border: var(--border, #2a3238);
  --nav-brand: var(--brand-dark, #e7ece9);
  --nav-link: var(--text, #e7ece9);
  --nav-link-hover: var(--brand, #3f9a6b);
  --nav-accent: var(--brand, #3f9a6b);
  --nav-accent-hover: var(--brand-hover, #348457);
  --nav-on-accent: #fff;
  --nav-ghost: var(--brand-dark, #e7ece9);
  /* THE THREE PIECES OF ARTWORK, NAMED ONCE. A page whose bar is an unusual
     colour picks one of these by name rather than repeating a file path - see
     styles/TerraLandingPage.css, where the accent button is light green in the
     DARK theme and dark green in the light one, the reverse of everywhere else.
     One place to change if the artwork is ever re-exported. */
  --nav-t-art-dark: url('../images/T_002_DarkGrey85OnCLearWithPadding0128.png');
  --nav-t-art-light: url('../images/T_002_LightGrey35OnClearWithPadding0128.png');
  --nav-t-art-white: url('../images/T_002_WhiteOnClearWithPadding0128.png');

  /* Which of them this page's bar wants. The default suits a DARK bar, which is
     what this block's other defaults describe; the light override follows. */
  --nav-t-src: var(--nav-t-art-light);
  /* ⚠️ NOT THEMED. A .btn-solid is the accent colour in both themes, so the
     mark on it is white in both. */
  --nav-t-src-on-accent: var(--nav-t-art-white);
}

/* A light bar needs the dark artwork. Only the one token changes - everything
   else about the mark is the same. */
:root[data-theme='light'] {
  --nav-t-src: var(--nav-t-art-dark);
}

/* =====================================================================
   The bar
   ===================================================================== */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.5rem;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}

.nav-brand {
  font-family: 'Days One', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: var(--nav-brand);
  text-decoration: none;
}

.nav-brand:hover {
  text-decoration: none;
}

/* The right-hand group. `.nav-actions` is the shared name; `.nav-links` is kept
   as an alias because the landing page's markup used it and its wider gap suits
   a row that mixes text links with buttons. */
.nav-actions,
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-links {
  gap: 1.2rem;
}

.nav-links a {
  color: var(--nav-link);
  font-size: 15px;
  font-weight: 500;
}

.nav-links a:hover {
  color: var(--nav-link-hover);
}

/* Terra wordmark image in the nav, shown when already signed in and linking back
   to the app. */
.nav-applogo {
  display: inline-flex;
  align-items: center;
}
.nav-applogo img {
  height: 26px;
  width: auto;
  display: block;
  /* Same dark-artwork problem as the T mark, one step lighter so the wordmark
     does not glare: brightness(0) -> solid black, invert(0.85) -> light grey. */
  filter: brightness(0) invert(0.85);
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: clamp(0.95rem, 1.6vmin, 1.1rem);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

.btn-solid {
  background: var(--nav-accent);
  color: var(--nav-on-accent);
}
.btn-solid:hover {
  background: var(--nav-accent-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--nav-ghost);
  border-color: var(--nav-border);
}
.btn-ghost:hover {
  border-color: var(--nav-accent);
  color: var(--nav-accent);
}

.btn-lg {
  padding: 0.8rem 1.5rem;
  font-size: clamp(1rem, 1.9vmin, 1.2rem);
}

.btn-block {
  width: 100%;
  margin-top: 0.4rem;
}

/* Icon-only nav buttons (account, home, the T mark). Square padding so the
   button hugs the icon; the SVG inherits the button's colour via currentColor,
   so it works on the solid and ghost variants alike. */
.btn-icon {
  padding: 0.5rem;
  line-height: 0;
}

.nav-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* The T mark. ONE rule; the recolouring is a token - see the header. */
.nav-t-icon {
  /* 1.25rem matches .nav-icon below, so the T button and the house button beside
     it are the same size and the bar stays even. */
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  background-image: var(--nav-t-src);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* A solid accent button is dark in every theme on every page, so the mark on it
   is always the white artwork regardless of what the page token says. */
.btn-solid .nav-t-icon {
  background-image: var(--nav-t-src-on-accent);
}

/* =====================================================================
   Bits that live in the bar
   ===================================================================== */

/* "Private beta" pill (and any future status pill).

   It gets its OWN border and background tokens rather than reusing --nav-border
   and --nav-bg. Those two are legitimately `transparent` on a page whose header
   paints its own chrome (the landing page does exactly that), and a badge with a
   transparent border is just floating text. */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nav-badge-text, var(--nav-link-hover));
  background: var(--nav-badge-bg, transparent);
  border: 1px solid var(--nav-badge-border, var(--nav-link-hover));
  border-radius: 999px;
  padding: 4px 10px;
}

/* The badge markup carries `hidden` until GET /api/config confirms the site is
   still in beta. This makes that attribute beat display:inline-block above, so
   nothing flashes on screen (or sticks if the config call fails). */
.badge[hidden] {
  display: none;
}

/* Hide secondary nav items on narrow screens rather than letting the bar wrap. */
@media (max-width: 720px) {
  .hide-sm {
    display: none;
  }
}