/* Shared masthead for Praxis pages and connected applications.
   Existing colour controls keep their own behaviour; form styles stay local. */
.pr-shared-header {
  box-sizing:border-box;
  position:relative;
  z-index:30;
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
  padding:26px 24px 28px;
  border:0;
  background:linear-gradient(110deg,var(--masthead-start,#eeebf7),var(--masthead-end,#e3def2));
  color:var(--link,#564596);
  text-align:center;
}
.pr-shared-header *,
.pr-shared-header *::before,
.pr-shared-header *::after { box-sizing:border-box; }
.pr-shared-header.pr-shared-static {
  --masthead-start:#eeebf7;
  --masthead-end:#e3def2;
  --link:#564596;
}
.pr-shared-header .pr-shared-circle {
  display:grid;
  place-items:center;
  flex:0 0 40px;
  width:40px;
  height:40px;
  margin:0;
  padding:0;
  color:inherit;
}
.pr-shared-header .pr-shared-circle > :is(a,button,summary),
.pr-shared-header .pr-shared-circle > details > summary {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:inherit;
  box-shadow:none;
}
.pr-shared-header .pr-shared-circle > svg,
.pr-shared-header .pr-shared-circle > :is(a,button,summary) > svg {
  display:block;
  width:40px;
  height:40px;
  max-width:none;
  flex:none;
}
/* Match the main practice signet: dark ring, chosen colour in the centre. */
.pr-shared-header .brand-symbol-ring { stroke:#1c3f4d; }
.pr-shared-header .brand-symbol-dot { fill:var(--link,#564596); r:5px; }
.pr-shared-header .pr-shared-circle > .practice-color-button { border:1.5px solid #1c3f4d; }
.pr-shared-header .pr-shared-brand {
  display:block;
  width:360px;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  color:#16242b;
  text-decoration:none;
}
.pr-shared-header .pr-shared-brand img {
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0;
  padding:0;
  border:0;
}
.pr-shared-header :is(a,button,summary):focus-visible {
  outline:2px solid var(--link,#564596);
  outline-offset:5px;
}
.pr-shared-header + .pr-navigation { flex:0 0 auto; }
@media(max-width:700px) {
  .pr-shared-header { padding:14px 18px 16px; gap:6px; }
  .pr-shared-header .pr-shared-brand { width:280px; }
}
@media(forced-colors:active) {
  .pr-shared-header { background:Canvas; color:LinkText; }
}

/* 02.10.2026: one native practice masthead, also inside an account shell. */
.pr-shared-header,
body:has(.app-shell) .pr-shared-header,
.practice-garden header.pr-shared-header {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  min-height:0 !important;
  height:auto !important;
  padding:28px clamp(20px,5vw,56px) 24px !important;
  background:linear-gradient(110deg,var(--masthead-start,#eeebf7),var(--masthead-end,#e3def2));
  text-align:center;
}
.pr-shared-header .pr-shared-circle,
body:has(.app-shell) .pr-shared-header .pr-shared-circle {
  flex:0 0 40px !important;
  width:40px !important;
  height:40px !important;
  transform:none !important;
}
.pr-shared-header .pr-shared-brand,
body:has(.app-shell) .pr-shared-header .pr-shared-brand {
  display:block;
  width:360px !important;
  max-width:100% !important;
  margin:0 !important;
}
.pr-shared-header .pr-shared-brand img { width:100%; height:auto; aspect-ratio:360/58; }
.pr-shared-header .preview-indicator { position:absolute; right:16px; bottom:8px; }
.pr-shared-header .identity-palette,
.pr-shared-header .palette-menu { display:none !important; }
@media(forced-colors:active) { .pr-shared-header { background:Canvas !important; color:CanvasText; } }

/* Account's native circle is an explicit palette button; brand/home stays a link. */
.pr-shared-header .pr-shared-circle:has(> button[data-praxis-palette-launch]),
body:has(.app-shell) .pr-shared-header .pr-shared-circle:has(> button[data-praxis-palette-launch]) {
  flex:0 0 44px !important; width:44px !important; height:44px !important;
}
.pr-shared-header .pr-shared-circle > button[data-praxis-palette-launch] {
  display:grid; place-items:center; width:44px !important; height:44px !important;
  min-width:44px; min-height:44px; margin:0; padding:2px; border:0;
  border-radius:50%; background:transparent; color:inherit; cursor:pointer;
}
.pr-shared-header .pr-shared-circle > button[data-praxis-palette-launch] > svg {
  width:40px; height:40px;
}