/* =========================================================================
   PAGE BANNER — Notion-style page cover, shared across every panel.
   ========================================================================= */
.pg-banner-wrap{
  position:relative;
  width:100%;
  border-radius:var(--r-lg);
  overflow:hidden;
  margin-bottom:var(--s-6);
  flex:0 0 auto;
}
/* Banner reads as an Empirium HUD strip, not a Notion hero — a restrained 4:1
   band that supports the page. Cover crops via background-size:cover. */
.pg-banner-wrap.has-cover{
  height:clamp(150px,20vw,208px);
  border:1px solid var(--line-soft);
  box-shadow:none;
}
.pg-banner-wrap.no-cover{
  height:36px;
  display:flex;
  align-items:flex-end;
  margin-bottom:var(--s-2);
}

.pg-banner-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.pg-banner-wrap.repositioning .pg-banner-bg{ cursor:ns-resize; }

/* ---- Empirium HUD overlay: dark scrim + lit corner brackets + cyan rail -----
   Decorative, pointer-transparent. The scrim keeps the navy shell dominant and
   the hover toolbar legible; brackets + a bottom cyan rail tie it to the HUD. */
.pg-banner-hud{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* faint technical grid — reads as system overlay, not decoration */
    repeating-linear-gradient(0deg,  rgba(120,190,225,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(120,190,225,.05) 0 1px, transparent 1px 34px),
    /* left-to-right scrim for text legibility */
    linear-gradient(90deg, rgba(5,7,13,.62), rgba(5,7,13,.16) 44%, transparent 72%),
    /* soft lower fade — the cover dissolves into the page rail below it */
    linear-gradient(180deg, transparent 58%, rgba(5,7,13,.9) 100%),
    linear-gradient(0deg,  rgba(5,7,13,.55), transparent 48%),
    radial-gradient(130% 150% at 50% -25%, transparent 58%, rgba(5,7,13,.34));
}
/* Lit HUD corner brackets — top-left + bottom-right. */
.pg-banner-hud::before,
.pg-banner-hud::after{
  content:''; position:absolute; width:16px; height:16px;
  border-style:solid; border-color:var(--hud-edge);
  border-radius:0 !important;
}
.pg-banner-hud::before{ top:9px; left:9px; width:20px; height:20px; border-width:1.5px 0 0 1.5px; box-shadow:-1px -1px 6px rgba(var(--accent-rgb),.2); }
.pg-banner-hud::after{
  right:9px; bottom:9px; width:20px; height:20px; border-width:0 1.5px 1.5px 0;
  box-shadow:1px 1px 8px rgba(var(--accent-rgb),.28);
}
/* Bottom edge reads as a system rail (not a picture frame): a lit cyan seam
   with a slightly deeper dark ledge underneath it, matching the shell chrome. */
.pg-banner-wrap.has-cover::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.55) 20%,rgba(var(--accent-rgb),.55) 80%,transparent),
    linear-gradient(180deg,transparent,rgba(5,7,13,.6));
  background-repeat:no-repeat;
  background-size:100% 1px,100% 100%;
  background-position:top,bottom;
}

.pg-banner-toolbar{
  position:absolute; top:var(--s-3); right:var(--s-3); z-index:3;
  display:flex; gap:var(--s-2);
  opacity:0; transform:translateY(-4px);
  transition:opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.pg-banner-wrap:hover .pg-banner-toolbar{ opacity:1; transform:translateY(0); }

/* Dark HUD glass chips — legible on the scrim, native to the navy shell. */
.pg-banner-btn{
  font-family:inherit;
  font-size:var(--fs-small);
  font-weight:var(--fw-m);
  padding:6px 12px;
  border:1px solid var(--line-bright);
  border-radius:var(--r-md);
  background:rgba(10,15,26,.72);
  -webkit-backdrop-filter:var(--glass-blur);
          backdrop-filter:var(--glass-blur);
  color:var(--text);
  cursor:pointer;
  box-shadow:var(--sh-1);
}
.pg-banner-btn:hover{ background:rgba(16,26,44,.82); border-color:var(--accent); }
.pg-banner-btn-primary{ background:var(--accent); color:var(--on-accent); border-color:transparent; }
.pg-banner-btn-primary:hover{ background:var(--accent-soft); }

.pg-banner-add-btn{
  display:flex; align-items:center; gap:6px;
  font-family:inherit;
  font-size:var(--fs-small);
  font-weight:var(--fw-m);
  color:var(--muted);
  background:rgba(var(--text-rgb),.04);
  border:1px dashed var(--line-bright);
  border-radius:var(--r-sm);
  padding:5px 10px;
  margin-bottom:6px;
  cursor:pointer;
  transition:color var(--t-base) var(--ease), background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.pg-banner-add-btn:hover,
.pg-banner-add-btn:focus-visible{
  color:var(--text);
  background:rgba(var(--text-rgb),.08);
  border-color:var(--accent);
}

.pg-banner-reposition-bar{
  position:absolute; left:var(--s-3); right:var(--s-3); bottom:var(--s-3); z-index:3;
  display:flex; align-items:center; gap:var(--s-2);
  background:rgba(255,255,255,.9);
  border-radius:var(--r-md);
  padding:6px 10px;
  box-shadow:var(--sh-1);
}
.pg-banner-reposition-bar span{
  flex:1;
  font-size:var(--fs-small);
  color:var(--muted);
}

/* ---- Cover / color-picker menu (appended to body, positioned via JS) ---- */
.pg-banner-menu{
  position:fixed;
  z-index:2000;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-2);
  padding:var(--s-3);
  display:flex; flex-direction:column; gap:var(--s-2);
  min-width:220px;
}
.pg-banner-menu-label{
  font-family:var(--font-mono, ui-monospace, monospace);
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); margin:2px 0 -2px;
}
.pg-banner-presets{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--s-2);
}
/* Hero swatch grid can grow tall — cap it and scroll rather than push the menu. */
.pg-banner-heroes{
  max-height:180px; overflow-y:auto;
  padding-right:2px; scrollbar-width:thin;
}
.pg-banner-swatch{
  width:100%; aspect-ratio:1;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  cursor:pointer;
  padding:0;
}
/* Image swatches show the actual hero (over the fallback gradient), 4:1 crop. */
.pg-banner-swatch-img{
  aspect-ratio:16/9;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.pg-banner-swatch:hover{ box-shadow:0 0 0 2px var(--accent) inset; }

.pg-banner-menu-item{
  font-family:inherit;
  font-size:var(--fs-body);
  text-align:left;
  padding:8px 10px;
  border:none;
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--text);
  cursor:pointer;
}
.pg-banner-menu-item:hover{ background:var(--card-hover); }
.pg-banner-menu-danger{ color:var(--danger); }

@media (max-width: 900px){
  .pg-banner-wrap.has-cover{ height:clamp(130px,32vw,170px); }
}