/*
 * Masthead — a quiet orientation rail.
 * Primary routes read as one group; keyboard help and session state are
 * utilities, not competing navigation items.
 */

html[data-design-system="halde"] header.mast,
html[data-design-system="halde"] header.mast.is-scrolled{
  height:64px;
  color:var(--text-primary);
  border:0;
  border-bottom:1px solid var(--border-default);
  background:color-mix(in srgb,var(--bg-page) 94%,transparent);
  box-shadow:none;
  -webkit-backdrop-filter:blur(14px) saturate(108%);
  backdrop-filter:blur(14px) saturate(108%);
}

html[data-design-system="halde"] .mastin{
  width:100%;
  max-width:none;
  height:64px;
  padding:0 var(--page-gutter);
  gap:32px;
}

html[data-design-system="halde"] .mastin > a{
  flex:none;
}

html[data-design-system="halde"] .mastin > a img{
  width:auto;
  height:21px!important;
  filter:var(--logo-filter)!important;
}

html[data-design-system="halde"] .mastin > a.mast-brand{
  width:92px;
  height:26px;
  display:grid;
  place-items:center;
  overflow:hidden;
}

html[data-design-system="halde"] .mastin > a.mast-brand img.mast-brand-logo{
  grid-area:1 / 1;
  width:92px!important;
  height:26px!important;
  display:block;
  object-fit:cover;
  object-position:center;
  filter:none!important;
}

html[data-design-system="halde"] .mast-brand-logo--dark{display:none!important}
html[data-design-system="halde"][data-theme="dark"] .mast-brand-logo--light{display:none!important}
html[data-design-system="halde"][data-theme="dark"] .mast-brand-logo--dark{display:block!important}

@media (prefers-color-scheme:dark){
  html[data-design-system="halde"][data-theme="system"] .mast-brand-logo--light{display:none!important}
  html[data-design-system="halde"][data-theme="system"] .mast-brand-logo--dark{display:block!important}
}

html[data-design-system="halde"] .mastnav{
  height:100%;
  display:flex;
  align-items:center;
  gap:0;
  color:var(--text-secondary);
  font-family:var(--font-editorial)!important;
  font-size:11px!important;
  font-weight:580!important;
  letter-spacing:.055em;
  text-transform:uppercase;
}

html[data-design-system="halde"] .mast-mobile-menu{display:none}

html[data-design-system="halde"] .mast-group,
html[data-design-system="halde"] .mast-group-links{
  display:contents;
}

html[data-design-system="halde"] .mast-group-label{
  display:none;
}

html[data-design-system="halde"] .mastnav .lnk{
  position:relative;
  height:100%;
  display:inline-flex;
  align-items:center;
  padding:0 clamp(12px,1.3vw,22px);
  color:var(--text-secondary)!important;
  border-left:1px solid transparent;
  box-shadow:none;
  text-decoration:none;
}

html[data-design-system="halde"] .mastnav .lnk:hover,
html[data-design-system="halde"] .mastnav .lnk.here{
  color:var(--text-primary)!important;
  background:color-mix(in srgb,var(--text-primary) 3.5%,transparent);
}

html[data-design-system="halde"] .mastnav .lnk.here::after{
  content:"";
  position:absolute;
  left:clamp(12px,1.3vw,22px);
  right:clamp(12px,1.3vw,22px);
  bottom:-1px;
  height:2px;
  background:var(--brand);
}

html[data-design-system="halde"] .key-help{
  height:32px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:clamp(12px,1.6vw,28px);
  padding:0 4px 0 13px;
  border:1px solid var(--border-strong);
  border-radius:0!important;
  color:var(--text-secondary)!important;
  background:transparent;
  box-shadow:none;
  font-family:var(--font-editorial)!important;
  font-size:9px!important;
  font-weight:580;
  letter-spacing:.07em;
  text-transform:uppercase;
}

html[data-design-system="halde"] .key-help kbd{
  width:23px;
  min-width:23px;
  height:22px;
  display:grid;
  place-items:center;
  padding:0;
  border:0!important;
  border-left:1px solid var(--border-default)!important;
  color:var(--text-primary)!important;
  background:transparent!important;
  box-shadow:none!important;
  font-family:var(--font-technical)!important;
  font-size:8px;
}

html[data-design-system="halde"] .key-help:hover,
html[data-design-system="halde"] .key-help:focus-visible{
  color:var(--text-on-accent)!important;
  border-color:var(--accent);
  background:var(--accent);
  outline:none;
}

html[data-design-system="halde"] .key-help:hover kbd,
html[data-design-system="halde"] .key-help:focus-visible kbd{
  color:var(--text-on-accent)!important;
  border-color:color-mix(in srgb,var(--text-on-accent) 28%,transparent)!important;
}

html[data-design-system="halde"] .mastnav .btn2.sm{
  height:36px;
  min-height:36px;
  margin-left:clamp(12px,1.6vw,28px);
  padding:0 17px;
  border:1px solid var(--border-strong);
  border-radius:0!important;
  color:var(--text-primary)!important;
  background:transparent!important;
  box-shadow:none;
  font-family:var(--font-editorial)!important;
  font-size:10px;
  font-weight:600;
  letter-spacing:.06em;
}

/* Temporary: keep the authentication trigger wired but out of the masthead. */
html[data-design-system="halde"] .mastnav [data-signin]{display:none}

html[data-design-system="halde"] .mastnav .btn2.sm:hover,
html[data-design-system="halde"] .mastnav .btn2.sm:focus-visible{
  color:var(--text-on-accent)!important;
  border-color:var(--accent)!important;
  background:var(--accent)!important;
}

html[data-design-system="halde"] .mast.you-live .mastnav > button.lnk{
  height:32px;
  margin-left:clamp(12px,1.6vw,28px);
  padding:0 12px;
  border:1px solid var(--border-strong);
}

@media (max-width:760px){
  html[data-design-system="halde"] .mastin{
    padding-inline:16px;
  }

  html[data-design-system="halde"] .mastin > a.mast-brand{
    width:88px;
    height:24px;
  }

  html[data-design-system="halde"] .mastin > a.mast-brand img.mast-brand-logo{
    width:88px!important;
    height:24px!important;
  }

  html[data-design-system="halde"] .mastnav .lnk{
    padding-inline:9px;
    font-size:9px;
  }

  html[data-design-system="halde"] .mastnav .lnk.here::after{
    left:9px;
    right:9px;
  }

  html[data-design-system="halde"] .key-help{
    width:30px;
    margin-left:7px;
    padding:0;
    border:0;
    font-size:0!important;
  }

  html[data-design-system="halde"] .key-help kbd{
    width:30px;
    height:30px;
    border:1px solid var(--border-strong)!important;
  }

  html[data-design-system="halde"] .mastnav .btn2.sm{
    margin-left:7px;
    padding-inline:11px;
    font-size:8px;
  }
}

@media (max-width:520px){
  html[data-design-system="halde"] .mastin{
    gap:10px;
  }

  html[data-design-system="halde"] .mastnav .lnk{
    min-width:30px;
    padding-inline:7px;
    font-size:0;
    justify-content:center;
  }

  html[data-design-system="halde"] .mastnav .lnk::before{
    font-family:var(--font-technical);
    font-size:8px;
    letter-spacing:.04em;
  }

  html[data-design-system="halde"] .mastnav .lnk[href="/feed"]::before{content:"P"}
  html[data-design-system="halde"] .mastnav .lnk[href="/docs"]::before{content:"D"}
  html[data-design-system="halde"] .mastnav .lnk[href="/faq"]::before{content:"?"}
  html[data-design-system="halde"] .mastnav .lnk[href="/profiles"]::before{content:"M"}
  html[data-design-system="halde"] .mastnav .lnk[href="/pricing"]::before{content:"$"}
  html[data-design-system="halde"] .mastnav .lnk[href="/blog"]::before{content:"B"}

  html[data-design-system="halde"] .key-help{
    width:40px;
    height:40px;
  }

  html[data-design-system="halde"] .key-help kbd{
    width:40px;
    height:40px;
  }

  html[data-design-system="halde"] .mastnav .btn2.sm{
    min-height:40px;
  }
}

@media (max-width:340px){
  html[data-design-system="halde"] .mastin{
    gap:8px;
    padding-inline:12px;
  }

  html[data-design-system="halde"] .mastnav .lnk{
    min-width:28px;
    padding-inline:5px;
  }

  html[data-design-system="halde"] .key-help{
    width:36px;
    margin-left:5px;
  }

  html[data-design-system="halde"] .key-help kbd{
    width:36px;
  }

  html[data-design-system="halde"] .mastnav .btn2.sm{
    margin-left:5px;
    padding-inline:8px;
  }
}