/* nav.css — the grouped section nav (public/nav.js) and the MFG board's card
   sizes. On every page, after the page's own <style> (tools/build-nav.mjs). */

/* The old flat nav is hidden until nav.js has regrouped it, and shown anyway
   after a moment if the script never runs. */
nav.modes:not(.sp-nav) { animation: sp-nav-show 0s linear 1.2s forwards; visibility: hidden; }
@keyframes sp-nav-show { to { visibility: visible; } }

nav.modes.sp-nav { display: flex; align-items: center; gap: 2px; padding: 2px; background: var(--bg, #f4f5f7); border-radius: 8px; flex-wrap: wrap; overflow: visible; }
nav.modes.sp-nav > a, .sp-dd > button {
  font: inherit; font-size: 13px; padding: 4px 12px; border-radius: 6px; border: 0; background: none;
  text-decoration: none; color: var(--mut, #6a7080); white-space: nowrap; cursor: pointer; line-height: 1.45;
}
nav.modes.sp-nav > a:hover, .sp-dd > button:hover { color: var(--ink, #16181d); }
nav.modes.sp-nav > a[aria-current="page"], .sp-dd.cur > button {
  background: var(--card, #fff); color: var(--ink, #16181d); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.10);
}
.sp-dd { position: relative; display: inline-flex; }
.sp-dd > button::after { content: ""; display: inline-block; margin-left: 6px; vertical-align: 2px;
  border: 4px solid transparent; border-top-color: currentColor; border-bottom-width: 0; }
.sp-dd-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 170px;
  background: var(--card, #fff); border: 1px solid var(--line, #d9dce3); border-radius: 9px; padding: 4px;
  box-shadow: 0 10px 24px rgba(16, 18, 29, .12); }
.sp-dd.open .sp-dd-menu { display: block; }
nav.modes.sp-nav .sp-dd-menu a { display: block; padding: 7px 10px; border-radius: 6px; font-size: 13.5px; font-weight: 400; color: var(--ink, #16181d); background: none; box-shadow: none; text-decoration: none; white-space: nowrap; }
nav.modes.sp-nav .sp-dd-menu a:hover, nav.modes.sp-nav .sp-dd-menu a:focus { background: var(--bg, #f4f5f7); outline: none; }
nav.modes.sp-nav .sp-dd-menu a[aria-current="page"] { font-weight: 600; color: var(--accent, #1d4ed8); }
.sp-admin-only { display: none !important; }
html.sp-admin .sp-admin-only { display: inline-flex !important; }
@media (max-width: 620px) {
  .sp-dd-menu { position: fixed; left: 10px; right: 10px; top: auto; min-width: 0; }
}

/* ── MFG board (jobs.html): every column the same width, every card the same
   height. A flex item's minimum width is its content's, so one long note on a
   card used to stretch its whole column across the screen. */
#board .col { flex: 0 0 260px; width: 260px; min-width: 0; }
#board .cards { min-width: 0; }
#board .job { min-width: 0; height: 140px; overflow: hidden; display: flex; flex-direction: column; }
#board .job .r1 { flex-wrap: nowrap; overflow: hidden; }
#board .job .r3 { margin-top: auto; padding-top: 7px; min-width: 0; }
#board .job .who, #board .job .what, #board .job .nts { max-width: 100%; }
body.tv #board .col { flex: 1 1 0; width: auto; min-width: 220px; }
body.tv #board .job { height: auto; overflow: visible; }

/* ── The SignPros mark (public/logo.js, Macrae, 2 Oct 2026): the tool bar's
   lockup at the 32px index.html gives it (tools/build-index.mjs), the
   customer wordmark on the approval page at 26px. */
header .sp-logo { display: flex; align-items: center; flex: 0 0 auto; }
header img.sp-logo-img { height: 32px; width: auto; display: block; align-self: center; flex: 0 0 auto; }
header img.sp-logo-img.sp-word { height: 26px; }
@media (max-width: 620px) {
  header img.sp-logo-img { height: 28px; }
  header img.sp-logo-img.sp-word { height: 22px; }
}