/* Shared masthead: one header for every page of the site. Make a Plot keeps its
 * own sticky/compact tweaks in modern.css on top of these rules. */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: #346295; color: #fff;
  min-height: 60px; height: 60px;
  display: flex; align-items: stretch; gap: 20px;
  padding: 0 clamp(14px, 3vw, 40px);
  font-family: Arial, Helvetica, sans-serif;
}
.masthead .brand { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; overflow: hidden; }
.masthead .brand:hover { text-decoration: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; overflow: hidden; }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.masthead nav { margin-left: auto; display: flex; gap: 4px; height: 100%; align-items: stretch; }
.masthead nav a, .masthead nav button {
  position: relative; display: flex; align-items: center; padding: 0 14px; margin: 0;
  color: #e6eef7; font: inherit; font-size: 14px; text-decoration: none; white-space: nowrap;
  background: none; border: 0; cursor: pointer; min-height: 0;
}
.masthead nav a:hover, .masthead nav button:hover { color: #fff; text-decoration: none; background: none; }
.masthead nav a:focus-visible, .masthead nav button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
/* ROOT's nav motif: a 4px bar that wipes in from the left, not a colour change */
.masthead nav a::after, .masthead nav button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #fff;
  transform: scaleX(0); transform-origin: left; transition: transform .18s ease-in-out;
}
.masthead nav a:hover::after, .masthead nav button:hover::after, .masthead nav a[aria-current]::after { transform: scaleX(1); }
.masthead nav a[aria-current] { color: #fff; font-weight: 600; }
@media (max-width: 760px) {
  .masthead { min-height: 52px; height: 52px; gap: 10px; }
  .masthead nav { gap: 0; }
  .masthead nav a, .masthead nav button { padding: 0 8px; font-size: 13px; }
  .masthead nav a[aria-current] { display: none; }
}
@media (max-width: 480px) {
  .masthead nav a, .masthead nav button { padding: 0 6px; font-size: 12px; }
}
/* Narrow screens: let the bar wrap to two rows rather than squeeze the brand. The
 * Make a Plot masthead keeps its own compact single-row rules in modern.css. */
@media (max-width: 600px) {
  .masthead:not(.workspace-masthead) { position: static; height: auto; min-height: 0; flex-wrap: wrap; padding: 4px 12px 0; }
  .masthead:not(.workspace-masthead) .brand { padding: 8px 2px; }
  .masthead:not(.workspace-masthead) nav { margin-left: 0; width: 100%; height: auto; flex-wrap: wrap; }
  .masthead:not(.workspace-masthead) nav a, .masthead:not(.workspace-masthead) nav button { padding: 8px 8px 10px; font-size: 13px; display: flex; }
}