/* 01-base.css: Design tokens, page shell, auth screens, site header and navigation, buttons, [hidden] and .sr-only.
   Loaded by base.html, one <link> per file in number order; a later file wins on source order. */
/* Design tokens, adopted from Headliners' ops-platform (apps/web/public/styles.css)
   and matched to the mockups by sampling their pixels rather than by eye:
   cards are white (#ffffff), not cream, the page and the header share #f5f1e8,
   and controls sit on their own slightly-off-white #fcfaf5. Canonical --color-*
   names; the auth screens use them directly too (HEA-417). */
:root {
  --color-bg: #f5f1e8;
  --color-bg-accent: #ebe5d7;
  --color-surface: #ffffff;
  --color-field: #fcfaf5;
  --color-surface-strong: #15110c;
  --color-primary: #e6532e;
  --color-primary-hover: #c94322;
  --color-primary-soft: #ffe4d8;
  --color-text: #1d1711;
  --color-muted: #5c5047;
  --color-border: #dfd3c0;
  --color-border-strong: #c9bba4;
  --color-error: #b42318;
  --color-error-bg: #fff1ef;
  --color-success-bg: #dcfce7;
  --color-success-fg: #166534;
  --color-warning-bg: #fdf1d6;
  --color-warning-fg: #8a5a12;
  --shadow-sm: 0 1px 2px rgba(29, 23, 17, 0.08);
  --shadow-md: 0 12px 32px rgba(29, 23, 17, 0.12);
  --radius: 10px;
  --radius-button: 2px;

  /* legacy aliases (pre-HEA-376 screens) */
  --muted: var(--color-muted);
  --border: var(--color-border);
  --pill-bg: #dcfce7;
  --pill-fg: #166534;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

/* Auth screens (login, tenant picker, account creation) opt into the narrow
   centered card; every other screen gets the wide app layout by default.

   1600px, not 1280: the mockups are drawn at 1440 and run their cards from
   x=40 to x=1400, i.e. 1360px of content. With 2.5rem gutters this matches
   them exactly at that width, and still caps before the line lengths get
   silly on an ultrawide. A 1280 cap would leave ~80px of dead margin either
   side at 1440 and push content that the mockups fit on one screen below
   the fold. */
.page {
  max-width: 1600px;
  margin: 0 auto;
  padding: 2rem 2.5rem;
}

/* Only the four auth screens use this (HEA-417): 28.5rem (456px) matches
   HEA-179_login.png's card, measured at x=491..949 (458px), to within 2px --
   26rem reads visibly narrower than the mockup against the card's visible
   border. */
/* Vertically centres the card in the viewport, per the mockup -- scoped to
   .page-narrow (these four screens only), so it never touches body/html or
   any other screen's layout. */
.page-narrow {
  max-width: 28.5rem;
  min-height: 100vh;
  padding: 4rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

/* Site header / navigation, adopted from ops-platform's .site-header + nav.
   The bar is the page background with a rule under it, not a raised surface --
   sampled straight out of the mockups, where header and page are both #f5f1e8. */
.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 0 2.5rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Kept in step with .page so the nav lines up with the content below it. On a screen too narrow
   for one row the items wrap onto a second one instead of pushing the page wide; the padding is
   the air around those rows and stays inside the 64px of a single row. */
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2.25rem;
  padding: 0.5rem 0;
  box-sizing: border-box;
  max-width: 1600px;
  margin: 0 auto;
  min-height: 64px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  color: var(--color-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  /* The items follow the logo directly, as in every mockup's nav; the user
     cluster (.nav-user) is what sits at the far right. */
  margin-right: 0.5rem;
}

/* The current section: dark and bold, the rest muted -- sampled from the
   mockups' nav, where only the active tab is #1a1a1a. */
.site-header nav a.active {
  color: var(--color-text);
  font-weight: 700;
}

.nav-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}

.nav-user a {
  color: var(--color-muted);
}

.logo-mark {
  height: 28px;
  width: auto;
}

.site-header nav a {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9375rem;
}

.site-header nav a:hover {
  color: var(--color-primary);
}

.nav-logout {
  margin: 0;
}

.nav-logout button {
  border: none;
  background: none;
  color: var(--color-muted);
  font-size: 0.9375rem;
  cursor: pointer;
  padding: 0;
}

.nav-logout button:hover {
  color: var(--color-primary);
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 1rem;
}

.muted {
  color: var(--color-muted);
  margin-bottom: 2rem;
}

/* Buttons, adopted from ops-platform. */
.btn {
  display: inline-block;
  /* Chrome's UA stylesheet defaults <button> to border-box but leaves <a> at
     content-box; pin both so an <a> and a <button> on the same class compute
     an identical box instead of differing by a sub-pixel rounding gap. */
  box-sizing: border-box;
  background: var(--color-primary);
  color: #fff;
  border: 2px solid var(--color-primary);
  padding: 0.56rem 0.95rem;
  border-radius: var(--radius-button);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  /* An <a>'s inherited body line-height (1.6) makes it a few px taller than a
     <button>'s UA-default one; pin both to the same value so an <a class="btn">
     and a <button class="btn"> match height wherever they sit side by side. */
  line-height: 1.25;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.btn:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--color-text);
  color: var(--color-text);
  /* Used on an <a> as well as a <button>; without this the link underline
     comes through and the control stops reading as a button. */
  text-decoration: none;
  padding: 0.55rem 1.25rem;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-sm {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}

/* The HTML `hidden` attribute and any element class that sets its own
   `display` (e.g. .badge) have equal CSS specificity, so source order alone
   decides which wins -- an author rule always beats the UA stylesheet's
   default `[hidden] { display: none }` regardless of order (HEA-180: without
   this rule a badge pill toggled hidden by JS stays visible).
   `!important` makes `hidden` win unconditionally, as every JS toggle here
   assumes it does. */
[hidden] {
  display: none !important;
}

/* Visually hidden but still in the accessibility tree (and to
   innerText-reading tools, unlike display:none): the login page's real <h1>
   sits behind the "BOLT" brand mark this way -- the mockup draws no text
   heading there, but the page still needs exactly one. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Auth screens (login, tenant picker, account creation, 403): one centred
   white card on the cream page, per HEA-179_login.png (login measured
   against it directly; the other three by analogy, HEA-417). */
.auth-card__brand {
  text-align: center;
  margin-bottom: 1.5rem;
}

.auth-card__brand .muted {
  margin-bottom: 0;
}

.auth-card h2 {
  font-size: 1rem;
  margin: 0 0 1rem;
}

.auth-card .field-grid {
  margin-bottom: 1rem;
}

/* Vertical rhythm between sibling <form>s: the dev-login form under the
   external-login one, and each tenant-picker row (one form per membership,
   so it can POST its own tenant_id). */
.auth-card form + form {
  margin-top: 0.75rem;
}

/* Stands in for a drawn icon: base.html's only brand asset is the full
   "bolt." wordmark (sized for the nav bar), not the mockup's black rounded
   square, so the mark is built here from the same dark token the wordmark
   itself is set in rather than adding a new image asset. */
.auth-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  border-radius: var(--radius);
  background: var(--color-surface-strong);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
}

.auth-card__title {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.auth-card__cta {
  display: block;
  width: 100%;
  text-align: center;
}

.auth-card__note {
  margin: 0.35rem 0 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
  text-align: center;
}

.auth-card__divider {
  margin: 2rem 0;
  border: none;
  border-top: 1px solid var(--color-border);
}

/* One membership per row (tenant picker): the whole row is the button. */
/* Compound selector, not .auth-card__row alone: .btn-quiet's own
   display:inline-block sits later in the file and would otherwise win on
   source order at equal specificity, collapsing the row back to centred
   inline content. */
.btn-quiet.auth-card__row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

/* A row naming two things (tenant, then the relation in it): two lines,
   left-aligned, so a long name wraps inside its own line instead of
   pushing against the other. */
.btn-quiet.auth-card__row--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  text-align: left;
}

.auth-card__row-sub {
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}