/* Backworth shared look. Served from backworth.quiksel.co.uk and included by
   the skips, waste and invoices sites. Visual only, nothing functional. */

:root {
  --bw-bar-h: 54px;
  --bw-lime: #a3d13c;
  --bw-accent: #1f6f3f;
  --bw-accent-soft: #e6f2ea;
  --bw-accent-edge: #c6e0d0;
  --bw-bg: #f6f7f4;
  --bw-card: #ffffff;
  --bw-ink: #0b0b0b;
  --bw-ink-2: #4b4d4a;
  --bw-muted: #6f736d;
  --bw-line: #dfe2dc;
  --bw-radius: 10px;
  --bw-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* skips dashboard tokens */
  --plane: var(--bw-bg);
  --surface-1: var(--bw-card);
  --ink: var(--bw-ink);
  --ink-2: var(--bw-ink-2);
  --muted: var(--bw-muted);
  --grid: #e7e9e3;
  --border: var(--bw-line);
  --brand: var(--bw-accent);
  --brand-soft: var(--bw-accent-soft);
  --us-wash: var(--bw-accent-soft);
  --us-edge: var(--bw-accent);
  --radius: var(--bw-radius);

  /* waste tracker tokens */
  --bg: var(--bw-bg);
  --card: var(--bw-card);
  --line: var(--bw-line);
  --accent: var(--bw-accent);
  --ok: var(--bw-accent);
  --ok-bg: var(--bw-accent-soft);
}

body {
  font-family: var(--bw-font);
  font-size: 15px;
  background: var(--bw-bg);
  color: var(--bw-ink);
  padding-top: var(--bw-bar-h);
}
h1, h2, h3, strong { font-family: var(--bw-font); }

/* ------------------------------ the main bar ---------------------------- */
#bw-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--bw-bar-h);
  background: var(--bw-card);
  border-top: 5px solid var(--bw-lime);
  border-bottom: 1px solid var(--bw-line);
  font-family: var(--bw-font);
  box-shadow: 0 1px 2px rgba(11,11,11,0.04);
}
#bw-bar .bw-in {
  max-width: 1240px; margin: 0 auto; height: 100%;
  padding: 0 18px; display: flex; align-items: center; gap: 16px;
}
#bw-bar .bw-home { display: flex; align-items: center; flex: none; }
#bw-bar .bw-home img { height: 30px; width: auto; display: block; }
#bw-bar nav { display: flex; gap: 6px; margin-left: 6px; }
#bw-bar nav a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 999px;
  font-size: 15px; font-weight: 650; letter-spacing: -0.005em;
  color: var(--bw-ink-2); text-decoration: none;
  border: 1px solid transparent;
}
#bw-bar nav a:hover { background: var(--bw-bg); color: var(--bw-ink); text-decoration: none; }
#bw-bar nav a.on {
  background: var(--bw-accent-soft); color: var(--bw-accent); border-color: var(--bw-accent-edge);
}
#bw-bar nav a svg { width: 17px; height: 17px; }
#bw-bar .bw-right { margin-left: auto; color: var(--bw-muted); font-size: 13px; white-space: nowrap; }
@media (max-width: 640px) {
  #bw-bar .bw-in { padding: 0 10px; gap: 8px; }
  #bw-bar nav a { padding: 7px 11px; font-size: 14px; }
  #bw-bar nav a svg { display: none; }
  #bw-bar .bw-right { display: none; }
}

/* ------------- each site's own header sits just under the bar ----------- */
/* skips */
header.top { top: var(--bw-bar-h); }
header.top .brand .logo { display: none; }
header.top .brand::after {
  content: "Skips"; font-weight: 700; font-size: 17px; color: var(--bw-ink);
}
header.top nav a.on { background: var(--bw-accent-soft); color: var(--bw-accent); }
.btn.primary, button.btn.primary { background: var(--bw-accent); border-color: var(--bw-accent); }

/* waste */
.topbar { top: var(--bw-bar-h); }
.topbar .brand strong { font-size: 0; }
.topbar .brand strong::after { content: "Waste"; font-size: 17px; font-weight: 700; color: var(--bw-ink); }
.topbar .brand .muted { display: none; }
.tabs button.active { background: var(--bw-accent-soft); border-color: var(--bw-accent-edge); color: var(--bw-accent); }
button.primary, .primary { background: var(--bw-accent); }