@import url("screate-brand.css?v=20261021-brand-left-v1");
@import url("browser-links.css?v=20261023-original-icon-colors-v1");

/* Scoped to the shared row; application toolbars keep their own styling. */
body :is(#top, .screate-site-header, .screate-standalone-brandbar, [data-screate-site-header]).screate-global-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 auto;
  gap: 0;
  position: sticky;
  top: 0;
  z-index: 1200;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  color: #172321;
  background: #fffefb;
  border: 0;
  border-bottom: 1px solid #dce3df;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body .screate-global-header > .screate-global-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 18px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 72px;
  padding: 10px clamp(12px, 1.5vw, 28px);
}
body .screate-global-row > a.screate-home-brand {
  order: 0;
  margin: 0;
  flex: 0 0 auto;
  color: #07544f;
  font-size: 21px;
}
body :is(#top, [data-screate-site-header]).screate-global-header .screate-global-row > .screate-global-nav {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  flex-wrap: nowrap;
  order: 0;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}
body .screate-global-header .screate-global-nav > a.tablink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 6px;
  box-sizing: border-box;
  min-height: 36px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #64727e;
  background: transparent;
  font: 650 13px/1.3 ui-sans-serif, system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}
body .screate-global-header .screate-global-nav > a:hover { color: #07544f; background: #dcefeb; }
body .screate-global-header .screate-global-nav > a.active { color: #fff; background: #086f69; border-color: #086f69; }
body .screate-global-header .screate-global-nav > a:focus-visible { outline: 2px solid #d9911e; outline-offset: -2px; }
.screate-global-header .screate-browser-icon { --screate-browser-icon-size: 16px; }
.screate-global-header .screate-nav-icon { display: block; flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; pointer-events: none; }
.screate-global-header .screate-nav-icon circle { fill: currentColor; stroke: none; }
body .screate-global-header > :is(.spacer, .divider) { display: none; }
/* Keep document-specific navigation below the common row, not at the edge. */
body .screate-global-header > nav:not(.screate-global-nav) { box-sizing: border-box; padding: 0 16px 12px; }
body #top.screate-global-header > #browserSelections { align-self: flex-start; max-width: 100%; box-sizing: border-box; padding: 4px 16px 10px; overflow-x: auto; }
html.screate-embedded body .screate-global-header,
body .screate-global-header[hidden] { display: none !important; }
/* One shared set of selection fields, right-aligned beside the site links. */
body .screate-global-header .screate-site-selections {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;
  margin: 0 0 0 auto;
  padding: 0;
}
body .screate-global-header .screate-site-selections[hidden] { display: none; }
body .screate-global-header .screate-selection-field {
  flex: 0 1 auto;
  min-width: 88px;
  width: max-content;
  max-width: 300px;
  box-sizing: border-box;
  margin: 0;
  padding: 3px 8px;
  border: 1px solid #b4cbc5;
  border-radius: 6px;
  background: #fffefb;
}
body .screate-global-header .screate-selection-field dt {
  font-size: 10px;
  line-height: 15px;
  font-weight: 650;
  color: #657872;
  white-space: nowrap;
}
body .screate-global-header .screate-selection-field dd {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 23px;
  margin: 0;
  color: #255d57;
  font: 650 12px/23px ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap;
}
body .screate-global-header .screate-selection-field dd > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* The shell's old #top button rules are for full-size navigation controls.
   Keep this shared icon isolated from those rules, including mobile sizing. */
body :is(#top, [data-screate-site-header]).screate-global-header .screate-selection-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 21px;
  box-sizing: border-box;
  width: 21px;
  min-width: 21px;
  max-width: 21px;
  height: 21px;
  min-height: 21px;
  max-height: 21px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: #9b5b56;
  cursor: pointer;
}
body .screate-global-header .screate-selection-clear svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
body :is(#top, [data-screate-site-header]).screate-global-header .screate-selection-clear:hover { background: #fae9e5; color: #9c3930; }
body :is(#top, [data-screate-site-header]).screate-global-header .screate-selection-clear:focus-visible { outline: 2px solid #d9911e; outline-offset: 1px; }
/* Bulk deselection sits immediately before the four fields and shares their
   muted-red clear affordance, with a larger keyboard-accessible hit target. */
body :is(#top, [data-screate-site-header]).screate-global-header .screate-selection-clear-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 36px;
  box-sizing: border-box;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  margin: 0;
  padding: 0;
  border: 1px solid #d8c6c2;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: #9b5b56;
  cursor: pointer;
}
body .screate-global-header .screate-selection-clear-all svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
body :is(#top, [data-screate-site-header]).screate-global-header .screate-selection-clear-all:hover:not(:disabled) { background: #fae9e5; color: #9c3930; }
body :is(#top, [data-screate-site-header]).screate-global-header .screate-selection-clear-all:focus-visible { outline: 2px solid #d9911e; outline-offset: 1px; }
body :is(#top, [data-screate-site-header]).screate-global-header .screate-selection-clear-all:disabled { opacity: .35; cursor: default; }
@media (max-width: 1190px) {
  body .screate-global-header > .screate-global-row { flex-wrap: wrap; gap: 8px 16px; }
  body .screate-global-header .screate-site-selections { flex-basis: 100%; }
  body .screate-global-header .screate-selection-field { flex: 1 1 0; max-width: none; }
}
@media (max-width: 700px) {
  body .screate-global-header > .screate-global-row { flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
  body .screate-global-row > a.screate-home-brand { font-size: 18px; }
  body :is(#top, [data-screate-site-header]).screate-global-header .screate-global-row > .screate-global-nav { flex: 1 1 100%; }
  body .screate-global-header .screate-site-selections { display: grid; grid-template-columns: 36px repeat(2, minmax(0, 1fr)); }
  body .screate-global-header .screate-selection-clear-all { grid-column: 1; grid-row: 1 / span 2; }
  body .screate-global-header .screate-site-selections[hidden] { display: none; }
  body .screate-global-header .screate-selection-field { min-width: 0; width: 100%; }
}
@media (max-width: 760px), (max-width: 1024px) and (hover: none) and (pointer: coarse) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body .screate-global-header > .screate-global-row {
    width: 100%; max-width: 100%; min-height: 0; gap: 4px; padding: 6px 8px;
  }
  body :is(#top, [data-screate-site-header]).screate-global-header .screate-global-row > .screate-global-nav {
    box-sizing: border-box; gap: 2px; padding: 1px 0;
  }
  /* Compact horizontal spacing without shrinking the touch-target height. */
  body :is(#top, [data-screate-site-header]).screate-global-header .screate-global-nav > a.tablink {
    gap: 4px; padding: 6px 5px; min-height: 36px; font-size: 12px;
  }
  body :is(#top, [data-screate-site-header]).screate-global-header .screate-global-nav .screate-browser-icon { --screate-browser-icon-size: 14px; }
  body :is(#top, [data-screate-site-header]).screate-global-header .screate-nav-icon { flex-basis: 14px; width: 14px; height: 14px; }
  /* Hide presentation only: retain selections and shared-link context. */
  body .screate-global-header .screate-site-selections { display: none !important; }
}
@media print { body .screate-global-header { display: none !important; } }
