/* Recruit portal bar. Leans on site.css for .bar, .wrap, .mark; adds only the
   nav, the signed-in block, and phone behaviour. Loaded after site.css. */
/* Static, not sticky: the chapter page has its own sticky progress bar under it. */
header.bar.portal{ position:static; background:var(--paper-100); border-bottom:1px solid var(--line-rule) }
.portal .inner{ gap:var(--space-6) }
.portal-nav{ display:flex; gap:var(--space-2); flex:1; min-width:0 }
.portal-nav a{ display:inline-block; text-decoration:none; font-family:var(--font-sans);
  font-weight:600; font-size:var(--body-sm); color:var(--text-body); padding:9px 12px;
  border-radius:var(--radius-xs); border:1px solid transparent; white-space:nowrap }
.portal-nav a:hover{ color:var(--text-display); background:var(--surface-raised) }
/* Current page: the red rule alone. No box, no fill. */
.portal-nav a[aria-current="page"]{ color:var(--text-display);
  box-shadow:inset 0 -2px 0 var(--flash-500) }
.portal-nav a[aria-current="page"]:hover{ background:none }
.portal-nav a[hidden]{ display:none }
.portal-me{ display:flex; align-items:center; gap:var(--space-4); flex:none }
.portal-me .nm{ font-weight:600; font-size:var(--body-sm); color:var(--text-display);
  max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.portal-me .out{ background:none; border:0; padding:0; cursor:pointer; font-family:var(--font-sans);
  font-size:var(--body-sm); color:var(--text-muted) }
.portal-me .out:hover{ color:var(--flash-500) }
.portal-me[hidden],.portal-in[hidden]{ display:none }
.portal-in{ font-weight:600; font-size:var(--body-sm); color:var(--text-display); text-decoration:none }

@media (max-width:640px){
  .portal .inner{ flex-wrap:wrap; gap:var(--space-3) var(--space-4) }
  .portal-nav{ order:3; flex-basis:100%; border-top:1px solid var(--line-hairline);
    padding-top:var(--space-3); margin-top:var(--space-1) }
  .portal-nav a{ flex:1; text-align:center }
  .portal-me{ margin-left:auto }
  .portal-me .nm{ max-width:120px }
}