/*
 * brand.css — the Buildoly brand, for both apps (CRM and Ops).
 *
 * Served at /shared/brand.css. Values are the brand guide's
 * (buildoly.com/dev/brand), not approximations of it: the
 * cream + warm ink scale, one accent blue for the main action, 4px buttons,
 * 12px cards, a 2px accent focus ring, accent text selection.
 *
 * The two apps keep separate page templates (public/shared/crm-page.css for
 * the CRM, public/ops/ops-nav.js and the /ops page for Ops) because different
 * people use them, but both read these tokens, so the brand cannot drift
 * between them. Change a value here, not in a page.
 *
 * Jeff 2026-09-30: blue main buttons (per the guide), both apps on the brand,
 * dark top bar with the white logo. Same day: the system font, not Articulat
 * CF, on team pages (Articulat read too light).
 */

:root {
  /* The system font (SF on Apple devices), as before 2026-09-30. Articulat CF
     is the brand face for customer documents (decks, reports, proposals), but
     on dense team screens it read too light: its 600 looks like regular
     (Jeff 2026-09-30, "go back to font from before"). No outside font download,
     which also helps Ops open on weak signal. */
  --bd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --bd-cream: #f7f5f1;    /* page background (warm) */
  --bd-ink-0: #ffffff;    /* cards, inputs */
  --bd-ink-50: #f2f0eb;   /* alt off-white, hover */
  --bd-ink-100: #ecebe5;  /* subtle fill, row dividers */
  --bd-ink-200: #d8d5cc;  /* hairline borders */
  --bd-ink-300: #b8b6ae;  /* disabled text */
  --bd-ink-400: #8c8b85;  /* mid strokes, meta text */
  --bd-ink-500: #6b6b67;  /* tertiary text (4.8:1 on cream) */
  --bd-ink-600: #50504c;
  --bd-ink-700: #3a3a3a;  /* secondary text */
  --bd-ink-800: #232323;
  --bd-ink-900: #161616;
  --bd-ink-950: #0a0a0a;  /* body text, dark surfaces */

  --bd-accent: #0071e3;       /* the main action on a page, and nothing else */
  --bd-accent-hover: #005bb8;

  --bd-radius-sm: 4px;    /* buttons */
  --bd-radius-md: 12px;   /* cards */
  --bd-radius-lg: 20px;   /* large panels */

  --bd-shadow-soft: 0 1px 2px rgba(10,10,10,.04), 0 4px 12px rgba(10,10,10,.04);
  --bd-shadow-medium: 0 2px 6px rgba(10,10,10,.06), 0 12px 32px rgba(10,10,10,.08);

  --bd-ease: cubic-bezier(0.83, 0, 0.17, 1);
  --bd-duration-fast: 150ms;

  /* The top bar both apps share the look of: dark, white logo. */
  --bd-bar: #1d1d1f;
  /* The top bar, CRM and Ops, same on every page. 10% up on 2026-09-30
     (Jeff: "make bars 10% bigger for everyone"); was 52 / 13 / 20 / 12px. */
  --bd-bar-h: 57px;
  --bd-bar-tab-font: 14px;
  --bd-bar-tab-lh: 20px;
  --bd-bar-tab-pad: 7px 13px;
  --bd-bar-logo-h: 22px;
  --bd-bar-name-font: 13px;
}

::selection { background: var(--bd-accent); color: #fff; }

/* Buttons and form fields do not inherit the page font by default, so they
   rendered in the system font next to Articulat text (the /ops bar showed it:
   its button tabs looked heavier than its link tabs). Type only. */
button, input, select, textarea { font-family: inherit; }
/* Button text is medium (500), never regular: Articulat at 400 reads thin on
   a button (Jeff 2026-09-30). Main actions and selected states stay 600.
   `html button` outranks a page's own plain `button { font: ... }` reset;
   a page class that sets its own weight must say 500 or more.
   test-brand-consistency fails any visible button under 500. */
html button, html .btn, html [role="button"], html input[type="button"], html input[type="submit"] { font-weight: 500; }

/* The logo in a top bar: the white house + wordmark, on its own (Jeff 2026-09-30). */
.bd-logo { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; white-space: nowrap; }
.bd-logo img { height: var(--bd-bar-logo-h); width: auto; display: block; }

/* ── Top-bar controls, the same in both apps (Jeff 2026-09-30) ───────────────
   Your name is plain grey text with a caret (the ops look, Jeff's pick);
   everything that drops down from the bar
   (the name menu, the CRM's Inbox / SVs Today / Resources, the ops hover
   submenus) is the same dark menu with the same rows. */
.bd-user-btn {
  font: inherit; font-size: var(--bd-bar-name-font); font-weight: 500; line-height: 1.4; color: #aaa; background: none; cursor: pointer; white-space: nowrap;
  border: 0; padding: 0; min-height: 0;   /* a page's own button { min-height } must not stretch the bar */
}
/* background too: a page's own button:hover (the fin pages) must not paint it. */
.bd-user-btn:hover, .bd-user-btn[aria-expanded="true"] { color: #fff; background: none; }
.bd-menu {
  background: #232323; border: 1px solid #3a3a3a; border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  padding: 6px 0; min-width: 200px; text-align: left;
  font-family: var(--bd-font); font-size: 13px; line-height: 1.4;
}
.bd-menu-h { padding: 6px 14px 4px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #8c8b85; }
.bd-menu-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%;
  padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 500; color: #d8d8d8; background: none; border: 0;
  text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.bd-menu-item:hover, .bd-menu-item:focus-visible { background: rgba(255,255,255,0.08); color: #fff; outline: none; }
.bd-menu-item[aria-current], .bd-menu-item.is-current { color: #fff; font-weight: 600; cursor: default; }
.bd-menu-sep { height: 1px; margin: 6px 0; background: #3a3a3a; }
.bd-menu-check { color: #4cd070; }