/* Deadset brand layer. Shared by the Fleet UI and the Module 1 pages.
   Load order: style.css or fleet.css first, then this file.

   Source: Chris's brand boards (2026-10-01). Palette values are from the board's colour panel:
   Safety Orange #FF6A00 (accent), Carbon #0B0F14 (primary), Steel #6B7280 (secondary), Fog #F3F4F6
   (neutral). One typeface: Montserrat (Bold / SemiBold / Regular).

   Three registers, one system (see DESIGN.md):
   - Console (Modern Safety Consultancy): supervisor console, sign-in, client-facing pages. Light.
   - Field (Industrial Enterprise): in-cab form, tag-out, outside QR page, printed labels. Carbon bar.
   - Documents (Premium Engineering): SWMS and history PDFs. Hairline rules.

   Rules this file keeps:
   - Orange means "needs attention" in this product, so Safety Orange appears only inside the logo
     lockup (the rule either side of "Safety Solutions"), never on buttons, links, nav or status.
     On the marketing website, where there is no warning state, it is the accent.
   - Primary actions are Carbon. Green stays "pass/available", red stays "hard stop".
   - The wordmark is the supplied SVG lockup (static/brand)
     and is not redrawn here.
   - Montserrat is self-hosted (SIL OFL, Latin subset, one variable file, about 38 KB). */

@font-face { font-family: "Montserrat"; src: url("/static/fonts/montserrat-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --brand-carbon: #0B0F14;
  --brand-orange: #FF6A00;
  --brand-steel: #6B7280;
  --brand-fog: #F3F4F6;
  --steel-700: #374151;
  --steel-600: #4B5563;
  --steel-300: #9CA3AF;
  --steel-100: #E5E7EB;
  --font-body: "Montserrat", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --font-field: var(--font-body);
  --font-eng: var(--font-body);
  --radius: 4px;
}

body { font-family: var(--font-body); }

/* Module 1 pages (style.css): Carbon is the primary action, green stays a status. */
:root { --accent: var(--brand-carbon); }
.badge-ok { color: #1B7A4B; border-color: #1B7A4B; }

/* ---- wordmark: Chris's supplied lockup SVGs (never redrawn). The files carry the brand orange themselves. ---- */
.wordmark { display: inline-flex; line-height: 0; }
.wordmark__img { display: block; height: 52px; width: auto; }

/* ---- header bars ---- */
.bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; }
.bar--field { background: var(--brand-carbon); color: #FFFFFF; border-bottom: 0; }
.bar--console { background: #FFFFFF; border-bottom: 1px solid var(--steel-100); }
.bar__id { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.15; }
.bar__org { font-size: 13px; font-weight: 500; color: var(--steel-300); }
.bar__plant { font-family: var(--font-field); font-weight: 800; font-size: 20px; letter-spacing: .02em; color: #FFFFFF; }
.bar__who { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.bar__who .bar__org { color: var(--steel-600); }
.bar__who a { white-space: nowrap; }
/* phone: the client name drops out of the header so the lockup, role and sign out sit on one row */
@media (max-width: 480px) {
  .bar--console .bar__org { display: none; }
  .bar--console { padding: 12px; }
  /* phone: the console header now carries Admin, My account and Sign out beside the logo: keep them on one row */
  .bar--console .wordmark__img { height: 40px; }
  .bar--console .bar__who { gap: 8px; }
  .bar--console .bar__who .badge { display: none; }
}

/* Sign out is a POST form (M13) styled to sit with the nav links: same colour, underline, 44px target */
form.signout { display: inline; margin: 0; }
.linkbtn { background: none; border: 0; padding: 0 4px; margin: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }