/* Shared header — every PM/frontend page (2026-08-21 nav-chrome design).
   Black background matches this app's convention (masthead/bl-head/wk-head/rq-appbar).
   Yellow 4px bottom border follows masthead and rq-appbar (bl-head uses 3px black;
   wk-head has no border). Not DESIGN_SYSTEM.md's white-header reference, which
   documents a different, unrelated codebase (see CLAUDE.md). Zero border-radius everywhere. */
#pmHeader {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #111111;
  border-bottom: 4px solid #FFCC00;
  padding: 14px 24px;
  min-height: 72px;
  box-sizing: border-box;
  flex: 0 0 auto;
}
.pmh-logo { height: 28px; width: auto; display: block; flex: 0 0 auto; }
.pmh-title {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 19px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1.1;
  flex: 0 0 auto;
}
.pmh-spacer { flex: 1 1 auto; }
/* flex-shrink 1, not 0: with no shrink and an auto basis the row is as wide as
   its content, so its own flex-wrap never triggers and the buttons run off the
   right edge (board at 768px — and at 1280px too — 2026-09-07). Allowed to
   shrink, it wraps as soon as the header is too narrow; when the row fits,
   nothing moves. */
.pmh-actions { display: flex; gap: 10px; align-items: center; flex: 0 1 auto; flex-wrap: wrap; }

.pmh-btn {
  font: 900 11px 'Inter', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 9px 14px;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  border: 3px solid #FFCC00;
  background: #111111;
  color: #fff;
  box-shadow: 2px 2px 0 0 #000000;
}
.pmh-btn:hover { background: #222222; }
.pmh-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.pmh-btn-primary {
  border: 3px solid #111111;
  background: #FFCC00;
  color: #111111;
  box-shadow: 4px 4px 0 0 #000000;
}
.pmh-btn-primary:hover { background: #fff; }
.pmh-btn-primary:active { transform: translate(4px, 4px); box-shadow: none; }
.pmh-btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pmh-btn[disabled] { opacity: .5; cursor: default; }
.pmh-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Pressed/active toggle state — mirrors board.css's .kb-btn[aria-pressed="true"]
   recipe (yellow fill, #111 border, 2px pressed-in shadow) so a page's own
   view-toggle buttons (e.g. board.html's "Exec read") keep the same active-state
   affordance after adopting .pmh-btn instead of .kb-btn. Generic, not board-only. */
.pmh-btn[aria-pressed="true"] {
  background: #FFCC00;
  color: #111111;
  border-color: #111111;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 #000000;
}

/* D51 — the language switcher. Sits at the far right of the header on every
   page, and is the one control that must be legible to someone who cannot read
   any other word on the screen: two language names, each in its own language,
   no label, no flag. The active half is the .pmh-btn-primary recipe (yellow
   fill, black text); the idle half is the .pmh-btn recipe. Zero radius, same
   3px yellow border, same house shadow. */
.pmh-lang {
  display: inline-flex;
  flex: 0 0 auto;
  border: 3px solid #FFCC00;
  box-shadow: 2px 2px 0 0 #000000;
  box-sizing: border-box;
}
.pmh-lang-opt {
  font: 900 11px 'Inter', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 8px 12px;
  background: #111111;
  color: #fff;
  border: none;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}
.pmh-lang-opt + .pmh-lang-opt { border-left: 3px solid #FFCC00; }
.pmh-lang-opt.on { background: #FFCC00; color: #111111; cursor: default; }
.pmh-lang-opt:hover:not(.on) { background: #222222; }
.pmh-lang-opt:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }

/* Phone-width wrap — generalizes the fix already shipped on index.html's
   .masthead alone (e80f3c5, 2026-08-21) to every page sharing this header,
   at the same breakpoint that fix used. */
@media (max-width: 640px) {
  /* Compact (2026-09-07, Julio's phone check): tighter padding buys ~20px of row
     width, and the title sits BESIDE the logo instead of under it — one row
     fewer on every page. The action row still drops to its own full-width line. */
  #pmHeader { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; gap: 12px; }
  .pmh-title { font-size: 14px; flex: 1 1 auto; min-width: 0; }
  .pmh-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
}
@media print {
  #pmHeader { border-bottom: 3px solid #111111; }
}