/* The header outside the app (the home page and the Grade Predictor pages) in the same places and sizes as inside it
   (css/header.css, .app rules), so that moving between Tools, My Matric Map and the Grade Predictor only changes the lit tab:
   the same height, the three tabs centred on the page at every width, the corner buttons the same size. On phones search takes
   the corner where the app has its ☰ menu (inside the app, search is in that menu) and the logo gives way, as it does there.
   Loaded after header.css by index.html and predictor*.html (the Grade Predictor pages); never by explore.html,
   whose stylesheet list is part of the example PDFs' check. tools/browser/header-match.spec.cjs measures both at many widths. */
:is(.home-v2,.predictor-page) .site-header .header-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:16px;padding-top:8px;padding-bottom:8px}
@media(max-width:700px){
  :is(.home-v2,.predictor-page) .site-header .header-row{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand primary actions";column-gap:6px;padding-inline:12px}
  :is(.home-v2,.predictor-page) .site-header .brand{display:none}
  :is(.home-v2,.predictor-page) .site-header .header-actions{display:contents}
  :is(.home-v2,.predictor-page) .site-header .search-btn{grid-area:brand;justify-self:start;display:inline-flex;width:40px;min-width:40px;height:40px;min-height:40px;padding:0}
  :is(.home-v2,.predictor-page) .site-header .account{grid-area:actions;justify-self:end}
  :is(.home-v2,.predictor-page) .site-header .primary-links .top-btn{display:flex;align-items:center;min-height:40px;padding:8px 9px;font-size:.8rem}
}
@media(max-width:374px){
  :is(.home-v2,.predictor-page) .site-header .primary-links .top-btn{padding-inline:6px;font-size:.74rem}
}
@media(max-width:360px){
  :is(.home-v2,.predictor-page) .site-header .header-row{column-gap:4px;padding-inline:8px}
  :is(.home-v2,.predictor-page) .site-header :is(.search-btn,.acct-menu summary){width:36px;min-width:36px;height:36px;min-height:36px}
}
@media(max-width:340px){
  :is(.home-v2,.predictor-page) .site-header .header-row{padding-inline:6px}
  :is(.home-v2,.predictor-page) .site-header .primary-links .top-btn{padding-inline:5px}
  :is(.home-v2,.predictor-page) .site-header .search-btn{display:inline-flex}
}