/* Each task keeps one static illustration. Live headings and controls stay
   above the decorative artwork; there is no theme or parallax controller. */
.workspace-header {
  --workspace-heading-inset:4px;
  --workspace-hero-height:360px;
  --workspace-back-clearance:78px;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:14px;
  min-height:calc(var(--workspace-hero-height) - var(--workspace-back-clearance));
  margin:0;
  padding:var(--workspace-heading-inset) 18px 16px;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--ink);
  box-shadow:none;
}
.workspace-header::before,
.workspace-header::after {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:min(100%,160px);
  z-index:-1;
  pointer-events:none;
}
.workspace-header::before {
  background-image:var(--workspace-banner-image);
  background-size:auto 100%;
  background-repeat:no-repeat;
  background-position:right center;
  opacity:.55;
}
/* The same painted scene blends into either palette without a framed edge. */
.workspace-header::after {
  background:
    linear-gradient(0deg,var(--bg),transparent 24%,transparent 88%,var(--bg)),
    linear-gradient(90deg,var(--bg),color-mix(in srgb,var(--bg) 92%,transparent) 34%,transparent 90%,var(--bg));
}
#panel-district > .workspace-header { --workspace-banner-image:url('/assets/workspaces/district-v2.webp'); }
#panel-cage > .workspace-header { --workspace-banner-image:url('/assets/workspaces/cage-v2.webp'); --workspace-hero-height:300px; }
#panel-tools > .workspace-header { --workspace-banner-image:url('/assets/workspaces/tools-v3.webp'); --workspace-hero-height:280px; }
#panel-inventory > .workspace-header { --workspace-banner-image:url('/assets/workspaces/inventory-v2.webp'); --workspace-hero-height:340px; }
#panel-stock > .workspace-header { --workspace-banner-image:url('/assets/workspaces/inventory-v2.webp'); }
#panel-returns > .workspace-header { --workspace-banner-image:url('/assets/workspaces/returns-v3.webp'); --workspace-hero-height:360px; }
#panel-history > .workspace-header { --workspace-banner-image:url('/assets/workspaces/history-v2.webp'); --workspace-hero-height:340px; }
.workspace-heading { min-width:0; width:66%; max-width:680px; }
.workspace-heading h1 {
  margin:0;
  color:var(--ink);
  font-size:28px;
  font-weight:750;
  line-height:1.2;
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
}
.workspace-heading > p { margin:6px 0 0; color:var(--ink-2); font-size:14px; line-height:1.45; }
.workspace-header-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; flex:none; max-width:100%; }
.workspace-header-actions button,
.stock-space-actions button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; white-space:normal; }
.workspace-header-actions button { padding:10px 14px; }
.workspace-header-actions .badge { white-space:nowrap; }

/* Approved photographic heroes share one theme/edge treatment; their real
   headings and actions stay in HTML above the decorative scene. */
.workspace-photo-header { overflow:visible; }
.workspace-photo-header::before,
.workspace-photo-header::after { inset:calc(-1 * var(--workspace-back-clearance)) -18px -20px; height:auto; }
.workspace-photo-header::before { background-size:auto 100%; background-position:right bottom; opacity:1; }
.workspace-photo-header::after { background:linear-gradient(0deg,var(--bg),transparent 14%),linear-gradient(90deg,var(--bg),transparent 55%); }
.workspace-photo-header .workspace-heading h1::after { content:''; display:block; width:50px; height:3px; margin-top:7px; border-radius:2px; background:var(--primary); }
.workspace-photo-header .workspace-heading > p { color:var(--ink); }
.workspace-photo-header + :is(.panel,.return-space-selector) { position:relative; z-index:1; }
#panel-tools > .workspace-photo-header::before,
#panel-tools > .workspace-photo-header::after,
#panel-returns > .workspace-photo-header::before,
#panel-returns > .workspace-photo-header::after { bottom:0; }
#panel-inventory .workspace-heading > p { max-width:185px; }
#panel-district .workspace-heading > p { max-width:185px; }
#panel-cage .workspace-heading > p { max-width:200px; }
#panel-history .workspace-heading > p { max-width:240px; }
.workspace-contrast-header .workspace-heading h1 { color:#fff; }
.workspace-contrast-header .workspace-heading h1::after { background:#65d9ed; }
.workspace-contrast-header .workspace-heading > p { color:#edf4f8; }
.workspace-contrast-header::after { background:linear-gradient(0deg,var(--bg),transparent 18%),linear-gradient(90deg,rgba(7,31,48,.8),rgba(7,31,48,.15) 72%); }
#panel-cage .empty-state { min-height:260px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
#panel-cage .empty-state p { max-width:400px; }
[data-theme="agilent-web-dark"] .workspace-photo-header::after { background:linear-gradient(0deg,var(--bg),transparent 25%),linear-gradient(90deg,var(--bg),color-mix(in srgb,var(--bg) 86%,transparent) 40%,color-mix(in srgb,var(--bg) 30%,transparent)); }

/* Keep the space name and responsible people visible at every screen size. */
.stock-space-header { justify-content:flex-start; }
.stock-space-identity { flex:none; width:100%; max-width:none; }
.stock-space-identity > :is(.eyebrow,.stock-space-title,.stock-space-owner) { max-width:76%; }
.stock-space-identity .eyebrow { margin:0 0 5px; color:var(--muted); }
.stock-space-title { display:block; }
.stock-space-title > span { min-width:0; overflow-wrap:anywhere; }
.stock-space-identity .back-to-inventory-spaces { margin:0 0 12px; min-height:44px; padding:8px 12px; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--primary); }
.stock-space-owner { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.stock-manager-pill { display:inline-flex; flex-wrap:wrap; gap:5px; padding:5px 8px; border:1px solid var(--line); border-radius:var(--chip-radius); background:var(--surface-2); color:var(--ink); font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
.stock-manager-pill-label { color:var(--muted); }
.stock-space-owner #contactStockManagerBtn { min-height:44px; }
.stock-space-actions { display:flex; flex-wrap:wrap; gap:8px; flex:none; width:min(100%,680px); min-width:0; }
.stock-action-primary,
.stock-action-utilities { display:contents; }
.stock-space-actions button { flex:1 1 140px; min-width:0; padding:10px 12px; font-size:13px; }
.stock-space-actions .stock-icon-action { flex:0 0 44px; width:44px; padding:9px; }
.stock-action-icon { display:block; width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

@media (max-width:900px) {
  .workspace-header { --workspace-hero-height:clamp(246px,70vw,360px); }
  #panel-inventory > .workspace-header { --workspace-hero-height:clamp(230px,58vw,340px); }
  #panel-cage > .workspace-header { --workspace-hero-height:clamp(210px,48vw,300px); }
  #panel-tools > .workspace-header { --workspace-hero-height:clamp(166px,42vw,280px); }
  #panel-history > .workspace-header { --workspace-hero-height:clamp(240px,55vw,340px); }
  #panel-returns > .workspace-header { --workspace-hero-height:clamp(230px,59vw,360px); }
  #panel-district > .workspace-photo-header::before { background-position:calc(100% + min(6vw,24px)) bottom; }
  .workspace-photo-header::after { background:linear-gradient(0deg,var(--bg),transparent 10%); }
  .workspace-contrast-header::after { background:linear-gradient(0deg,var(--bg),transparent 18%),linear-gradient(90deg,rgba(7,31,48,.8),rgba(7,31,48,.15) 72%); }
  [data-theme="agilent-web-light"] #panel-cage > .workspace-photo-header::after,
  [data-theme="agilent-web-light"] #panel-returns > .workspace-photo-header::after { background:linear-gradient(0deg,var(--bg),transparent 10%),linear-gradient(90deg,color-mix(in srgb,var(--bg) 90%,transparent) 20%,color-mix(in srgb,var(--bg) 85%,transparent) 46%,transparent 72%); }
  [data-theme="agilent-web-dark"] .workspace-photo-header::after { background:linear-gradient(0deg,var(--bg),transparent 22%),linear-gradient(90deg,color-mix(in srgb,var(--bg) 94%,transparent),color-mix(in srgb,var(--bg) 84%,transparent) 38%,color-mix(in srgb,var(--bg) 20%,transparent)); }
}
@media (max-width:768px) {
  .workspace-header { --workspace-back-clearance:54px; }
  .workspace-photo-header::before,
  .workspace-photo-header::after { left:-12px; right:-12px; }
}
@media (max-height:500px) and (orientation:landscape) {
  .workspace-header { --workspace-hero-height:270px; }
  #panel-inventory > .workspace-header { --workspace-hero-height:270px; }
  #panel-cage > .workspace-header,
  #panel-tools > .workspace-header,
  #panel-history > .workspace-header,
  #panel-returns > .workspace-header { --workspace-hero-height:270px; }
}
@media (max-width:767px) {
  .workspace-header { gap:12px; padding:var(--workspace-heading-inset) 12px 16px; }
  .workspace-heading { flex:none; width:76%; }
  .workspace-heading h1 { font-size:24px; }
  .workspace-heading > p { font-size:13px; }
  .workspace-header-actions { width:100%; justify-content:flex-start; }
  .stock-space-identity > :is(.eyebrow,.stock-space-title,.stock-space-owner) { max-width:86%; }
  .stock-space-actions { flex:none; width:100%; }
  .stock-space-actions button { flex-basis:120px; }
  .stock-space-actions .stock-icon-action { flex-basis:44px; }
}

/* Keep live hero text legible without covering the approved artwork. */
.workspace-header { --hero-text:#102a3a; --hero-outline:#f5fbff; }
body[data-theme="agilent-web-dark"] .workspace-header { --hero-text:#f5fbff; --hero-outline:#061a29; }
.workspace-header :is(.workspace-heading h1,.workspace-heading > p,.stock-space-title,.stock-space-owner,.stock-manager-pill,.stock-manager-pill-label) {
  color:var(--hero-text); -webkit-text-stroke:.55px var(--hero-outline); paint-order:stroke fill;
  text-shadow:0 1px 2px var(--hero-outline),0 0 4px var(--hero-outline);
}

.workspace-contrast-header { --hero-text:#f5fbff; --hero-outline:#061a29; }