/* Bair Development — shared brand layer.
   Loaded LAST on every page of bair.dev. Holds only:
   1. the brand colour tokens,
   2. the Bair Development bar at the top of every page (.bd-bar),
   3. the shared footer (.bd-footer),
   4. the app-icon tile in app page headers.
   Everything is namespaced "bd-" so it cannot collide with page styles. */

:root {
  --bd-bg: #2E3E31;          /* leather desk green */
  --bd-surface: #364b3c;
  --bd-ink: #F7EBDF;         /* parchment */
  --bd-muted: #D5CBB3;
  --bd-accent: #D5A873;      /* warm brass */
  --bd-accent-ink: #2B200F;
  --bd-line: rgba(247, 235, 223, .14);
  --app: #D5A873;            /* per-app accent; brass unless overridden below */
}

/* One accent colour per app, used only for small details. */
html[data-app="wardtrack"]          { --app: #8FAFD6; }
html[data-app="bair-cars"]          { --app: #6FCB9C; }
html[data-app="quicknotes-obscura"] { --app: #A9B7FF; }
html[data-app="quicknotes-recall"]  { --app: #7FCDC4; }

/* ── Top bar ─────────────────────────────────────────────── */
.bd-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding: 0 0 14px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--bd-line);
  font: 500 14px/1.3 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.bd-bar a { text-decoration: none; }
.bd-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--bd-ink);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
}
.bd-home:hover { color: var(--bd-accent); text-decoration: none; opacity: 1; }
.bd-mark {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  background: var(--bd-ink);
  padding: 3px;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.bd-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 -10px 0 0;
}
.bd-links a {
  color: var(--bd-muted);
  padding: 6px 10px;
  border-radius: 999px;
  margin: 0;
}
.bd-links a:hover { color: var(--bd-ink); background: rgba(255, 255, 255, .06); text-decoration: none; opacity: 1; }
.bd-links a[aria-current="page"] { color: var(--bd-accent); }
.bd-links a.bd-cta {
  color: var(--bd-accent-ink);
  background: var(--bd-accent);
  font-weight: 600;
  padding: 7px 14px;
  margin-left: 6px;
}
.bd-links a.bd-cta:hover { background: #e2bb8c; color: var(--bd-accent-ink); }

/* Larger variant used on the main Bair Development pages */
.bd-bar--site { padding-bottom: 18px; margin-bottom: 26px; }
.bd-bar--site .bd-home { font-size: 18px; gap: 12px; }
.bd-bar--site .bd-mark { width: 44px; height: 44px; border-radius: 12px; padding: 4px; }
.bd-bar--site .bd-links { font-size: 15px; }

/* For full-width pages that have no .wrap container */
.bd-bar-outer { background: var(--bd-bg); padding: 14px 24px 0; }
.bd-bar-outer .bd-bar { max-width: 1100px; margin: 0 auto; border-bottom: 0; }

@media (max-width: 560px) {
  .bd-bar { font-size: 13px; }
  .bd-links { margin: 0 0 0 -10px; }
  .bd-bar--site .bd-home { font-size: 16px; }
  .bd-bar--site .bd-mark { width: 38px; height: 38px; }
  .bd-bar--site .bd-links { font-size: 14px; }
  .bd-links a { padding: 6px 8px; }
  .bd-links { margin-left: -8px; }
}

/* ── App icon tile in app page headers ───────────────────── */
.brand .logo {
  overflow: hidden;
  padding: 0;
  background: none;
  border-radius: 22%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .08);
}
.brand .logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand .kicker { color: var(--app); }

/* ── Shared footer ───────────────────────────────────────── */
.bd-footer {
  margin: 44px 0 10px;
  padding: 22px 0 0;
  border-top: 1px solid var(--bd-line);
  color: var(--bd-muted);
  font: 400 14px/1.55 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: block;
  opacity: 1;
}
.bd-footer a { color: var(--bd-muted); text-decoration: none; }
.bd-footer a:hover { color: var(--bd-accent); text-decoration: underline; opacity: 1; }
.bd-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 28px;
  flex-wrap: wrap;
}
.bd-footer-top p { margin: 0; max-width: 520px; }
.bd-footer-top strong { color: var(--bd-ink); }
.bd-footer-links { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.bd-footer-links a { color: var(--bd-accent); }
.bd-more {
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 13px;
}
.bd-more-label {
  flex: 0 0 100%;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bd-muted);
  opacity: .75;
  margin-bottom: 2px;
}
.bd-legal { margin: 18px 0 0; font-size: 13px; opacity: .8; }

/* Full-width pages */
.bd-footer-outer { background: var(--bd-bg); padding: 0 24px 24px; }
.bd-footer-outer .bd-footer { max-width: 1100px; margin: 0 auto; }