/* ─── EXPLORER.EXE — Win98 chrome, dark body (matches the site) ───
   Fully grayscale by design: every colour literal in this file must satisfy
   R==G==B, and colour emoji / bitmaps carry filter:grayscale(1). Enforced by
   test/explorer-contract.test.mjs, which parses the colours out of this file.

   Colour emoji ignore CSS `color` entirely and render in full colour, so a
   filter is the only fix — the same approach index.html already uses on the
   shop magnifier's titlebar icon. */
.exp-glyph{filter:grayscale(1)}

/* .win.open is display:block. Without this override the inner panes ignore
   the window height and a resize does nothing visible below the toolbar. */
#win-explorer.open{display:flex;flex-direction:column}
#win-explorer .win-inner{flex:1;min-height:0;display:flex;flex-direction:column}

.exp-toolbar{
  background:#c0c0c0;border-bottom:1px solid #808080;
  display:flex;align-items:center;gap:3px;padding:2px 4px;flex-shrink:0;
}
.exp-tool{
  background:#c0c0c0;border:1px solid;border-color:#fff #808080 #808080 #fff;
  font-family:Tahoma,sans-serif;font-size:10px;color:#000;
  padding:1px 6px;cursor:pointer;
}
.exp-tool:hover:not(:disabled){background:#d0d0d0}
.exp-tool:active:not(:disabled){border-color:#808080 #fff #fff #808080}
.exp-tool:disabled{color:#808080;text-shadow:1px 1px 0 #fff;cursor:default}
.exp-tool.active{border-color:#808080 #fff #fff #808080;background:#d0d0d0}
.exp-tool-sep{width:1px;height:14px;background:#808080;border-right:1px solid #fff;margin:0 3px}

.exp-addressbar{
  background:#c0c0c0;border-bottom:1px solid #808080;
  display:flex;align-items:center;gap:5px;padding:2px 5px;flex-shrink:0;
}
.exp-address-label{font-size:10px;color:#000}
.exp-address{
  flex:1;background:#252525;border:1px solid;border-color:#808080 #fff #fff #808080;
  color:#c8c8c8;font-family:Tahoma,sans-serif;font-size:10px;padding:1px 5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.exp-body{flex:1;min-height:0;display:flex;background:#000}

.exp-sidebar{
  width:150px;flex-shrink:0;overflow:auto;
  background:#0d0d0d;border-right:1px solid #333;padding:6px 0;
}
.exp-splitter{width:4px;flex-shrink:0;background:#c0c0c0;cursor:ew-resize;
  border-left:1px solid #fff;border-right:1px solid #808080}

.exp-tree-row{display:flex;align-items:center}
.exp-tree-row .exp-tree-item{flex:1;min-width:0}
.exp-tree-exp{
  width:11px;height:11px;flex-shrink:0;margin-left:4px;
  background:#0d0d0d;border:1px solid #555;color:#d8d8d8;
  font-size:9px;line-height:9px;text-align:center;cursor:pointer;user-select:none;
}
.exp-tree-item{
  display:flex;align-items:center;gap:5px;
  font-size:11px;color:#d8d8d8;padding:2px 8px;cursor:pointer;user-select:none;
}
.exp-tree-item:hover{background:#1a1a1a}
.exp-tree-item.selected{background:#484848;color:#fff}
.exp-tree-child{padding-left:22px;position:relative}
/* Dotted connector, as the Win98 tree drew it. */
.exp-tree-child::before{
  content:'';position:absolute;left:11px;top:0;bottom:0;
  border-left:1px dotted #555;
}
.exp-tree-root{font-weight:bold;color:#fff}

.exp-content{flex:1;min-width:0;overflow:auto;background:#0d0d0d;padding:8px}
/* Win98 scrollbars, same treatment as .tracklist */
.exp-content,.exp-sidebar{scrollbar-width:thin;scrollbar-color:#444 #111}
.exp-content::-webkit-scrollbar,.exp-sidebar::-webkit-scrollbar{width:14px}
.exp-content::-webkit-scrollbar-track,.exp-sidebar::-webkit-scrollbar-track{
  background:#111;border-left:1px solid #222}
.exp-content::-webkit-scrollbar-thumb,.exp-sidebar::-webkit-scrollbar-thumb{
  background:#333;border:1px solid;border-color:#555 #222 #222 #555}
.exp-content::-webkit-scrollbar-thumb:hover,.exp-sidebar::-webkit-scrollbar-thumb:hover{
  background:#444}
.exp-content::-webkit-scrollbar-button,.exp-sidebar::-webkit-scrollbar-button{
  background:#2a2a2a;height:14px;border:1px solid;border-color:#555 #222 #222 #555}

.exp-empty{color:#888;font-size:11px;padding:14px}

/* ─── Large icon grid ─── */
.exp-icons{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.exp-item{
  width:88px;padding:5px 3px;cursor:pointer;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.exp-item:focus{outline:1px dotted #888}
.exp-item-icon{
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  font-size:26px;color:#d8d8d8;
}
.exp-thumb{border:1px solid;border-color:#808080 #fff #fff #808080;background:#000;padding:1px}
/* contrast(1.05) alongside the desaturation, matching how .ep-cover and
   .merch-poster already treat artwork on this site. */
.exp-thumb img{max-width:44px;max-height:44px;display:block;filter:grayscale(1) contrast(1.05)}
.exp-link-icon svg{width:30px;height:30px;fill:#d8d8d8}
.exp-item-label{
  font-size:10px;color:#d8d8d8;line-height:1.25;word-break:break-word;padding:1px 3px;
}
.exp-item.selected .exp-item-label{background:#484848;color:#fff}
/* A broken image must not leave an empty tile. The onerror handler hides the
   <img> and flags its wrapper, which draws a file glyph in its place. An <img>
   cannot carry ::before, which is why the flag goes on the parent for tiles. */
.exp-img-missing{display:none}
.exp-thumb-missing::before{content:'\1F5CE';font-size:24px;color:#888;filter:grayscale(1)}

/* ─── Details rows ─── */
.exp-rows{display:flex;flex-direction:column;font-size:11px;color:#d8d8d8}
.exp-row{display:grid;gap:6px;align-items:center;padding:2px 4px;cursor:pointer}
.exp-row:focus{outline:1px dotted #888}
.exp-row:hover:not(.exp-row-head){background:#1a1a1a}
.exp-row.selected:not(.exp-row-head){background:#484848;color:#fff}
.exp-row-head{
  background:#c0c0c0;color:#000;font-size:10px;cursor:default;
  border:1px solid;border-color:#fff #808080 #808080 #fff;margin-bottom:3px;
}
.exp-row-name{display:flex;align-items:center;gap:6px;min-width:0}
.exp-row-name span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exp-vthumb{width:64px;height:36px;object-fit:cover;flex-shrink:0;
  border:1px solid;border-color:#808080 #fff #fff #808080;
  filter:grayscale(1) contrast(1.05)}
.exp-icon-mp3,.exp-icon-img{flex-shrink:0;width:14px;text-align:center;color:#888}
.exp-link-mini svg{width:14px;height:14px;fill:#888;flex-shrink:0}

.exp-rows-gallery .exp-row{grid-template-columns:1fr 90px 80px}
.exp-rows-video   .exp-row{grid-template-columns:1fr 80px 110px}
.exp-rows-links   .exp-row{grid-template-columns:1fr 110px}
.exp-rows-music   .exp-row{grid-template-columns:26px 1fr 52px 46px 72px 78px}

/* ─── Image viewer ─── */
#win-viewer.open{display:flex;flex-direction:column}
#win-viewer .win-inner{flex:1;min-height:0;display:flex;flex-direction:column}
.viewer-stage{
  flex:1;min-height:0;background:#000;
  display:flex;align-items:center;justify-content:center;padding:6px;
  border-bottom:1px solid #333;
}
#viewer-img{max-width:100%;max-height:100%;object-fit:contain;display:block;
  filter:grayscale(1) contrast(1.05)}
.viewer-controls{
  background:#c0c0c0;border-top:2px solid;border-color:#808080 #fff #fff #808080;
  display:flex;align-items:center;gap:5px;padding:3px 5px;flex-shrink:0;
}
.viewer-counter{font-size:10px;color:#000;margin:0 auto 0 4px}

/* ─── Resize handles (any window with data-resizable) ─── */
.win-rz{position:absolute;z-index:5}
.win.maximized .win-rz{display:none}
.win-rz-n{top:-2px;left:8px;right:8px;height:4px;cursor:ns-resize}
.win-rz-s{bottom:-2px;left:8px;right:8px;height:4px;cursor:ns-resize}
.win-rz-e{right:-2px;top:8px;bottom:8px;width:4px;cursor:ew-resize}
.win-rz-w{left:-2px;top:8px;bottom:8px;width:4px;cursor:ew-resize}
.win-rz-ne{top:-2px;right:-2px;width:8px;height:8px;cursor:nesw-resize}
.win-rz-nw{top:-2px;left:-2px;width:8px;height:8px;cursor:nwse-resize}
.win-rz-se{bottom:-2px;right:-2px;width:8px;height:8px;cursor:nwse-resize}
.win-rz-sw{bottom:-2px;left:-2px;width:8px;height:8px;cursor:nesw-resize}