/* BuildRight brand shell for the Python-rendered field tools.
 *
 * The JSA builder, the emergency locator and the Telco packager are Flask
 * pages, not Next routes: they cannot import the design system, and they used
 * to ship system-ui with a palette invented on the spot — three of about a
 * dozen colours matched the site. Worse, they had no header at all, so opening
 * a tool felt like leaving for someone else's website.
 *
 * This file is that missing half. It is served from our own origin (a field
 * tool is used on a site with bad signal — a third-party font handshake is a
 * cost we do not need to pay), and it is ONE file for all three tools, so the
 * tokens cannot drift the way two copies of a Python module would.
 *
 * Linked as <link rel="stylesheet" href="/brand-tools.css"> from each
 * template. Nothing here is Tailwind — these pages have no build step.
 */

/* ── Faces ────────────────────────────────────────────────────────────────
   Latin subsets only: these tools are used in English and Spanish. Geist is
   variable, so one file covers every weight. Arial Narrow is the display
   fallback on purpose — a condensed headline reflowing into a normal-width
   face breaks the layout it was sized for, not merely the look. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-condensed-700.woff2') format('woff2');
}

/* ── Tokens ───────────────────────────────────────────────────────────────
   The same values the site ships. Semantic colours carry compliance meaning
   here as everywhere else: green passed/valid, amber expiring, red expired or
   error — never borrowed for emphasis. */
:root {
  --br-navy: #0A1B3A;
  --br-navy-2: #152D5E;
  --br-blue: #2A73E8;
  --br-blue-hover: #1D5FD4;
  --br-on-dark: #60A5FA;      /* the only blue that passes on navy */
  --br-on-dark-muted: #B9C6DE;
  --br-pale: #EAF0FF;
  --br-surface: #F8FAFF;
  --br-line: #E8ECF4;
  --br-muted: #64748B;
  --br-pass: #16A34A;
  --br-attention: #FBBF24;
  --br-amber-ink: #92400E;
  --br-fail: #DC2626;

  --br-r-control: 8px;
  --br-r-card: 12px;
  --br-r-surface: 16px;

  --br-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --br-display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
}

body {
  font-family: var(--br-sans);
  background: var(--br-surface);
  color: var(--br-navy);
  -webkit-font-smoothing: antialiased;
}

/* ── Panel header ─────────────────────────────────────────────────────────
   A copy of src/components/layout/PanelHeader.tsx, which is what /tools/jsa,
   /tools/route and /team already wear. The archive and the builder are one
   job to the person using them, so the chrome must not flip from white to
   navy when they move between the two — which is exactly what a first pass
   at this did.

   The whole bar is one grid row that scrolls its nav rather than wrapping:
   these pages open on a phone held in one hand. */
.br-panel {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #FFFFFF;
  border-bottom: 1px solid var(--br-line);
}
.br-panel__in {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.br-panel__brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.br-panel__home {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 2px; flex: none; text-decoration: none;
}
.br-panel__logo { width: 34px; height: 34px; object-fit: contain; }
.br-panel__word {
  display: none; font-weight: 800; font-size: 14px; letter-spacing: -0.01em;
  color: var(--br-navy); white-space: nowrap;
}
.br-panel__word span { color: var(--br-blue); }
.br-panel__sep { display: none; color: #CBD5E1; }
@media (min-width: 640px) { .br-panel__word { display: inline; } }
@media (min-width: 768px) { .br-panel__sep { display: inline; } }
.br-panel__title {
  font-weight: 700; font-size: 14px; color: var(--br-navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.br-panel__nav { display: flex; align-items: center; gap: 2px; overflow-x: auto; min-width: 0; }
.br-panel__nav::-webkit-scrollbar { display: none; }
.br-panel__nav { scrollbar-width: none; }
.br-panel__right { display: flex; align-items: center; gap: 4px; flex: none; }

.br-nav__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; min-width: 44px; padding: 0 10px;
  border: 0; background: none; cursor: pointer;
  border-radius: var(--br-r-control);
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--br-muted); text-decoration: none; white-space: nowrap;
}
.br-nav__link:hover { color: var(--br-blue); background: #F6F8FC; }
.br-nav__link--on { background: var(--br-pale); color: var(--br-blue); }
.br-nav__link--danger:hover { color: var(--br-fail); background: #FEF2F2; }
.br-nav__ico { display: inline-flex; flex: none; }

/* The labels go before the bar does. Icons alone still carry the nav on a
   phone, and every target stays 44px wide. */
.br-nav__label { display: none; }
@media (min-width: 1024px) { .br-nav__label { display: inline; } }
.br-nav__label--sm { display: none; }
@media (min-width: 640px) { .br-nav__label--sm { display: inline; } }

/* ── Shared bits the tools reuse ─────────────────────────────────────────── */
.br-crumb {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 16px 0;
  font-size: 13px;
}
.br-crumb a { color: var(--br-blue); text-decoration: none; font-weight: 600; }
.br-crumb a:hover { text-decoration: underline; }

/* iOS Safari zooms the page when a focused input is under 16px. These forms
   are filled outdoors on a phone; the jump loses your place in a long form. */
@media (max-width: 640px) {
  input:not([type='checkbox']):not([type='radio']),
  select,
  textarea { font-size: 16px !important; }
}