/* Scoped to visual branding; the application font and header grids stay intact. */
[data-branding-font="current"] {font-family:Inter,"Segoe UI",Helvetica,Arial,sans-serif}
[data-branding-font="system"] {font-family:system-ui,"Segoe UI",sans-serif}
[data-branding-font="arial"] {font-family:Arial,Helvetica,sans-serif}
[data-branding-font="georgia"] {font-family:Georgia,"Times New Roman",serif}
[data-branding-surface] {min-width:0}
[data-branding-surface] .branding-name {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-branding-surface] .branding-name[hidden] {display:none}
:root {--brand-header-logo-size:2rem;--brand-header-inset:12px}
[data-branding-surface] .branding-logo {display:block;flex:none;min-width:0;width:var(--brand-header-logo-size);max-width:100%;height:var(--brand-header-logo-size);object-fit:contain}
[data-branding-surface] > :is(.branding-symbol,.brand-mark,.editor-brand-mark) {flex:none;width:var(--brand-header-logo-size);height:var(--brand-header-logo-size)}
:is(.landing-page,.account-page) > .site-header {padding-inline:var(--brand-header-inset)}
.editor-page .editor-brand {justify-content:flex-start;padding-inline:var(--brand-header-inset)}
.landing-page [data-branding-surface="landing"] {max-width:min(22rem,45vw)}
/* The real header and narrow owner preview use the same compact dimensions. */
[data-branding-surface="editor"] {
  --branding-editor-width:var(--branding-editor-symbol-width,56px);
  --branding-editor-padding:var(--brand-header-inset);
  --branding-editor-alignment:flex-start;
  --branding-editor-name-display:block;
}
[data-branding-surface="editor"]:has(.branding-name:not([hidden])) {
  --branding-editor-width:120px;
  --branding-editor-padding:var(--brand-header-inset);
  --branding-editor-alignment:flex-start;
}
.editor-preview.narrow-preview {container:editor-branding / inline-size}
@media(max-width:900px) {
  .editor-page .editor-topbar {container:editor-branding / inline-size;grid-template-columns:max-content minmax(0,1fr) auto;--branding-editor-symbol-width:56px}
  .editor-page [data-branding-surface="editor"] {width:var(--branding-editor-width);padding-inline:var(--branding-editor-padding);justify-content:var(--branding-editor-alignment)}
  .editor-page [data-branding-surface="editor"] .branding-name:not([hidden]) {display:var(--branding-editor-name-display)}
  .editor-page [data-branding-surface="editor"] :is(.branding-logo,.editor-brand-mark) {flex-shrink:0}
}
@media(max-width:600px) {
  .editor-page .editor-topbar {grid-template-columns:max-content minmax(0,1fr);--branding-editor-symbol-width:54px}
}
@container editor-branding (max-width:340px) {
  [data-branding-surface="editor"]:has(.branding-name:not([hidden])) {
    --branding-editor-width:var(--branding-editor-symbol-width,56px);
    --branding-editor-padding:var(--brand-header-inset);
    --branding-editor-alignment:flex-start;
    --branding-editor-name-display:none;
  }
}
@media(max-width:600px) {
  :root {--brand-header-logo-size:1.875rem}
  .editor-page [data-branding-surface="editor"] {--branding-editor-symbol-width:54px}
}

/* Reveal the real header only after its current published symbol is ready. */
:is(.landing-page,.account-page) [data-branding-surface="landing"]:not([data-branding-ready="true"]) > *,
.editor-page [data-branding-surface="editor"]:not([data-branding-ready="true"]) > * { visibility:hidden; }

/* The exact Gateway colors, applied only to official brand symbols. Provider
   marks, artwork, profile photographs and application icons are unaffected. */
:root { --promlab-spectrum:conic-gradient(#f17b85,#edaa73,#ece18a,#84d9a3,#83dce2,#839fe9,#bd91e4,#f17b85); }
.branding-symbol {
  display:inline-grid;
  position:relative;
  isolation:isolate;
  flex:0 1 auto;
  min-width:0;
  vertical-align:middle;
}
.branding-symbol > img { grid-area:1 / 1; }
.branding-symbol::after {
  content:"";
  grid-area:1 / 1;
  background:var(--promlab-spectrum);
  mask:var(--branding-symbol-mask) center / contain no-repeat;
  -webkit-mask:var(--branding-symbol-mask) center / contain no-repeat;
  mix-blend-mode:multiply;
  opacity:.85;
  pointer-events:none;
}
.branding-symbol > .branding-logo { max-width:100%; }
/* Compact copies inherit their existing slot dimensions. */
:is(.editor-action-logo,.generator-mark,.patterns-logo) > .branding-symbol {
  width:100%; height:100%;
}
:is(.editor-action-logo,.generator-mark,.patterns-logo) > .branding-symbol > img {
  width:100%; height:100%; object-fit:contain;
}
@media (forced-colors:active) { .branding-symbol::after { display:none; } }