/* pinkfield.art surface: black night, green interface, pink field behind the space.
   Appearance only. The order and function of every control stay as they were. */
:root{
  --pf-black:#000;--pf-panel:#020a05e8;--pf-green:#3dff7f;--pf-green-soft:#8dffb4;--pf-green-dim:#4fb876;
  --pf-text:#dcffe7;--pf-muted:#79a888;--pf-line:#2fd96a66;--pf-pink:#ff4fa6;--pf-glow:0 0 14px #31ff7a73,0 0 3px #7dffaa;
  color:var(--pf-text);background:var(--pf-black);color-scheme:dark
}
html,body{background:var(--pf-black)}
#pinkfieldGrass{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;pointer-events:none}
main{position:relative;z-index:1}

.pfBrand{margin:0 0 8px;font:400 26px/1.1 Georgia,'Times New Roman',serif;letter-spacing:.01em;color:var(--pf-pink);text-shadow:0 0 12px #ff3d9a66}

/* Controls */
button{border-color:#2fd96a40;background:#03130988;color:var(--pf-text)}
button:hover{background:#0a2a14cc;border-color:var(--pf-green-dim)}
button:focus-visible,input:focus-visible,#stage:focus-visible,summary:focus-visible{outline:2px solid var(--pf-green);outline-offset:3px}
#searchForm{border:1.5px solid var(--pf-green);background:#010603e6;box-shadow:var(--pf-glow),inset 0 0 18px #19ff6a1f}
#query{color:var(--pf-text);caret-color:var(--pf-green)}
#query::placeholder{color:#6fa883}
#search{background:transparent;color:var(--pf-green);font-size:22px}
#search:hover{background:#0b2e17}
#newSearch,.backStep,#historyToggle{color:var(--pf-green-soft)}
.queryOptions{color:var(--pf-green-soft)}
.queryOptions label:has(:checked){color:var(--pf-green)}
.queryOptions input,.spaceTools input,.quietMotionOption input{accent-color:var(--pf-green)}
.zoomControls button{color:var(--pf-green-soft);background:transparent}
.muz3Bar,.muz3Bar #layoutNotice{color:var(--pf-muted)}
.layoutWarning{color:#ffd9a8;background:#2a1a06cc;border-left-color:#d79a4c}
.referenceInfo{color:var(--pf-green-soft)}
#branchTrail{background:var(--pf-panel);border-color:var(--pf-line)}
#branchTrail button,#branchSelect{background:transparent;color:var(--pf-text);border-color:transparent}
#branchTrail button:hover:enabled{background:#0a2a14cc}
#branchTrail #branchBack{color:var(--pf-green-soft)}
#error{color:#ffd0dc;background:#2a0812e6;border-color:#a3405f}

/* The space: transparent over the field; the medium keeps its own canvas. */
#stage,#stage:not(.inspecting){background:transparent;border-radius:0}
.point:focus-visible{outline:1px dashed var(--pf-green)}
.point.textFallback{background:#04140acc;border-color:var(--pf-line);color:var(--pf-text)}
.point.textFallback:hover{background:#0a2a14ee;border-color:var(--pf-green)}
#empty{color:var(--pf-muted)}
#details{background:var(--pf-panel);border:1px solid var(--pf-line);box-shadow:0 0 30px #1aff6a22;color:var(--pf-text)}
#details h2{color:#f2fff6}
#artRights,#artSource,#imageStatus{color:var(--pf-muted)}
.decisions button,#fromHere{background:#03130988;border-color:var(--pf-line);color:var(--pf-text)}
#saveArtwork[aria-pressed="true"]{background:#0d3a1d;border-color:var(--pf-green)}
.collectionActions{border-top-color:#2fd96a33}
#shelfPreview{filter:drop-shadow(0 16px 20px #000)}
#groupVeil{background:radial-gradient(ellipse at 50% 48%,#00000080 0,#00000055 52%,transparent 85%)}
.groupCard::before{background:radial-gradient(ellipse,#000a,transparent 72%)}
#closeGroup{background:#020a05d9;border-color:var(--pf-line);color:var(--pf-text)}
#closeGroup:hover{background:#0a2a14;border-color:var(--pf-green)}

/* Small text over the field keeps a dark halo for legibility. */
.queryOptions,.spaceTools,.artworkNav,.muz3Bar,#newSearch,.zoomControls{text-shadow:0 0 6px #000,0 0 2px #000,0 0 10px #000}

/* Below the space */
.spaceTools,.spaceTools button,.presentationControls,.resultAccess,.experimentTools,#presentationHint,#presentationSummary{color:var(--pf-muted)}
.spaceTools button:hover:enabled,#visitorPresentation:hover:enabled,#resetPresentation:hover:enabled{background:#0a2a1488}
/* Controls that sit over the moving field get a calm, solid dark backing (no blur
   filter: that would re-filter the field under them on every frame). Later rules here
   must not set the selection strip's background or the #shelfEmpty colour again. */
.spaceTools>button{background:#000000c8;border-radius:14px;padding:5px 12px;color:var(--pf-green-soft)}
.spaceTools>button:disabled{color:var(--pf-muted)}
.spaceTools>button:hover:enabled{background:#0a2a14e0}
.artworkNav{background:linear-gradient(to top,#000000e6 0,#000000c4 58%,#00000000 100%);border-radius:18px 18px 0 0}
#shelfEmpty{color:#a9d6b8}

/* Overlapping results: a small stacked mark on the overlap. It takes no pointer events,
   so the click lands on the artwork under it and the existing group view opens there. */
.pfStacks{position:absolute;inset:0;pointer-events:none;z-index:4000}
.pfStack{position:absolute;transform:translate(-50%,-50%);min-width:24px;height:24px;padding:0 7px;border:1.5px solid var(--pf-pink);border-radius:12px;
  background:#0b0007e0;color:#ffd6ea;font:600 12px/21px system-ui,sans-serif;text-align:center;
  box-shadow:3px 3px 0 -1.5px #0b0007,4px 4px 0 -1.5px var(--pf-pink),0 0 10px #ff3d9a55}
.pfStack[hidden],#stage.group-expanded .pfStacks,#stage.inspecting .pfStacks,body.pfCards .pfStacks{display:none}
#visitorPresentation,#resetPresentation,.presentationSliders output{color:var(--pf-green-soft)}
.framingNotice{color:#d9f7c8;background:#0a1d0bcc;border-left-color:var(--pf-green-dim)}
.artworkNav{border-bottom-color:transparent}
.shelfHeading{color:var(--pf-green-soft);font-size:21px}
.shelfHeading span,#collectionTools p{color:var(--pf-muted)}
.artShortcut:hover,.artShortcut[aria-pressed=true]{border-color:var(--pf-green-dim);background:#0a2a1499}
.artShortcut img,.artShortcut canvas{filter:drop-shadow(0 4px 6px #000)}
#collectionStatus,#collectionMessage[data-error="true"]{color:#ff9fb8}
.experimentTools select,.muz3Bar select{background:#03130988;color:var(--pf-text);border-color:var(--pf-line)}
.diagnostics th,.diagnostics td{border-bottom-color:#2fd96a26}

/* Desktop composition: the space fills the window behind the search bar, so the
   medium floats large over the field; the selection sits at the bottom edge. */
@media (min-width:761px){
  .pfBrand{position:absolute;left:20px;top:26px;margin:0;z-index:3;font-size:23px}
  #stage:not(.inspecting),#stage.inspecting{position:absolute;left:0;right:0;top:44px;height:calc(100dvh - 44px);min-height:420px;max-height:none;margin:0;z-index:0}
  .searchShell,#referenceInfo,.queryOptions,#error,.muz3Bar,.spaceTools,.framingNotice,.presentationControls,.resultAccess,.artworkNav,.experimentTools{position:relative;z-index:2}
  .spaceTools{margin-top:auto}
  /* Rows over the space pass drags through; their own controls stay clickable. */
  .searchShell,.queryOptions,.muz3Bar,.spaceTools,.artworkNav{pointer-events:none}
  .searchShell>*,.queryOptions>*,.muz3Bar>*,.spaceTools>*,.artworkNav>*{pointer-events:auto}
  .searchBar{pointer-events:none}
  .searchBar>*{pointer-events:auto}
  .artworkNav{min-height:72px;padding:6px 0 8px}
}
@media (min-width:761px) and (max-width:1359px){.pfBrand{position:static;margin:-8px 0 4px 4px;font-size:20px}#stage:not(.inspecting),#stage.inspecting{top:68px;height:calc(100dvh - 68px)}}
@media (min-width:1600px){.pfBrand{left:32px;top:30px;font-size:28px}}

/* Calm mode button and the card-view notice */
.pfCalm{min-height:44px;padding:6px 14px;border:1px solid var(--pf-line);border-radius:22px;background:#03130988;color:var(--pf-green-soft);font-size:11px;white-space:nowrap}
.pfCalm[aria-pressed="true"]{background:#0d3a1d;border-color:var(--pf-green);color:var(--pf-green)}
.pfNotice{position:relative;z-index:2;width:min(1040px,100%);margin:8px auto 0;padding:9px 12px;border-left:2px solid var(--pf-green-dim);border-radius:2px;background:#04140add;color:var(--pf-text);font-size:12px;line-height:1.5}

/* Card view: still and dark; the same visible results as cards with the existing
   open / choose / save controls. Used without WebGL 2, after a lost context, in
   narrow windows and on ?view=cards. */
body.pfCards #stage,body.pfCards #stage.inspecting,body.pfCards #stage:not(.inspecting){position:relative!important;top:auto!important;left:auto!important;right:auto!important;
  width:min(1040px,100%);height:auto!important;min-height:0!important;max-height:none!important;margin:10px auto 0!important;overflow:visible!important;cursor:auto;touch-action:auto;
  flex:none!important}
body.pfCards #medium,body.pfCards #points,body.pfCards #groupLayer,body.pfCards #empty{display:none!important}
body.pfCards #details{position:relative;top:auto;right:auto;left:auto;width:auto;max-height:none;margin:0 0 12px}
body.pfCards #shelfPreview{position:relative;top:auto;left:auto;display:block;width:min(420px,100%);height:auto;max-height:60vh;margin:0 auto 12px}
body.pfCards #resultAccess:not([hidden]){display:block!important;position:relative;z-index:2;width:min(1040px,100%);margin:12px auto}
body.pfCards #resultAccess>summary{display:none}
body.pfCards #resultButtons{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;padding:4px 0}
body.pfCards #resultButtons button{display:flex;flex-direction:column;gap:8px;width:auto;height:auto;padding:10px;border:1px solid var(--pf-line);border-radius:12px;
  background:var(--pf-panel);color:var(--pf-text);font-size:12px;line-height:1.35;text-align:left}
body.pfCards #resultButtons button:hover:enabled{border-color:var(--pf-green)}
body.pfCards #resultButtons img{width:100%;height:170px;object-fit:contain;background:#000}
body.pfCards #resultButtons button:has(img)::after{content:attr(title);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body.pfCards .zoomControls,body.pfCards #spaceHint,body.pfCards #centerSpace,body.pfCards #homeView,body.pfCards .muz3Bar{display:none}
body.pfCards .spaceTools{margin-top:8px}
.pfDetailImage{display:block;width:100%;max-height:52vh;object-fit:contain;margin:6px 0 4px;background:#000;border-radius:6px}
body:not(.pfCards) .pfDetailImage{display:none}
/* Before the first search the visitor surface shows only the search shell; the name and a
   card-view notice belong to that first view too (the :is() id only lifts specificity). */
body[data-phase="entry"] main>p:is(.pfBrand,#pf-entry).pfBrand.pfBrand{display:block!important}
body[data-phase="entry"] main>#pfNotice.pfNotice.pfNotice:not([hidden]){display:block!important;width:min(680px,100%)}
@media (max-width:520px){.pfCalm{padding:6px 9px;font-size:10px}}