:root{
  --mapper-grid-line: var(--color-border);
  --mapper-canvas-bg: var(--bk-panel-bg);

  --mapper-topbar-h: 2.25rem;
  --mapper-status-h: 1.6rem;
  --mapper-shelf-w: 14rem;
  --mapper-shelf-w-collapsed: 2.4rem;
}

/* compact, no wasted space */
html, body.bk-mapper-page { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; overflow: hidden; }

#mapper-topbar{
  height: var(--mapper-topbar-h);
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:0 .4rem;
  border-bottom: 1px solid var(--color-border, rgba(255,255,255,.12));
}
.tb-left{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-center{ opacity:.85; white-space:nowrap; }
.tb-right{ display:flex; gap:.25rem; }
.tb-tool{ min-width:0; }

.mode-btn{ padding:.2rem .4rem; }
.mode-btn.active{ outline: 1px solid var(--color-border, rgba(255,255,255,.22)); }

#mapper-main{ flex:1; display:flex; min-height:0; }
#tool-shelf{
  width: var(--mapper-shelf-w);
  min-width: var(--mapper-shelf-w-collapsed);
  max-width: 24rem;
  border-right: 1px solid var(--color-border, rgba(255,255,255,.12));
  overflow:auto;
  position: relative;
}
#tool-shelf.collapsed{ width: var(--mapper-shelf-w-collapsed); }

#shelf-resize-handle{
  position:absolute;
  top:0; right:0;
  width:6px; height:100%;
  cursor: ew-resize;
  user-select:none;
}

.shelf-row{ display:flex; gap:.25rem; padding:.25rem .35rem; align-items:center; }
.shelf-btn{ padding:.15rem .35rem; }
.shelf-title{ font-size:.8rem; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.drawer{ border-bottom: 1px solid var(--color-border, rgba(255,255,255,.10)); }
.drawer > summary{
  list-style:none;
  cursor:pointer;
  padding:.35rem .45rem;
  font-size:.9rem;
  display:flex;
  align-items:center;
  gap:.35rem;
}
.drawer > summary::-webkit-details-marker{ display:none; }
.drawer-body{ padding:.35rem .45rem; }
.drawer-body.col{ display:flex; flex-direction:column; gap:.35rem; }
.row{ display:flex; gap:.35rem; align-items:center; }
.lab{ min-width:3.5rem; }
.small{ font-size:.85rem; opacity:.9; }
.muted{ opacity:.75; }

#tool-shelf.collapsed .txt{ display:none; }
#tool-shelf.collapsed .drawer-body{ display:none; }

#mapper-canvas-wrap{ flex:1; position:relative; min-width:0; }
#mapper-canvas{ background: var(--mapper-canvas-bg); width:100%; height:100%; display:block; }

#mapper-status{
  height: var(--mapper-status-h);
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:0 .4rem;
  border-top: 1px solid var(--color-border, rgba(255,255,255,.12));
  font-size:.8rem;
  white-space:nowrap;
  overflow:hidden;
}
#mapper-status span{ overflow:hidden; text-overflow:ellipsis; }

.struct-tag{
  position:absolute;
  top:2px; right:4px;
  font-size:10px;
  opacity:.35;
  pointer-events:none;
}


/* Shared header popover layering for mapper */
.bk-header { position: relative; z-index: 10000; }
.bk-hamburger-wrap { position: relative; }
#bk-nav-popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20000; }
.bk-user-wrap { position: relative; }
#bk-avatar-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20000; }




/* v0.2.42: make regions visually distinct without wasting space */
#mapper-topbar{
  background: var(--bg-panel, var(--bg-panel-soft, transparent));
}
#tool-shelf{
  background: var(--bg-panel-soft, var(--bg-panel, transparent));
}
#mapper-canvas-wrap{
  background: var(--bg-panel, transparent);
}
#mapper-status{
  background: var(--bg-panel-soft, transparent);
}



/* v0.2.42: debug tags visible on light themes */
.struct-tag{
  background: var(--bg-panel, rgba(255,255,255,.65));
  border: 1px solid var(--border-soft, rgba(0,0,0,.15));
  padding: 0 4px;
  border-radius: 4px;
}



/* v0.2.42: Option A (clearer region separation) + base copper theme
   - Variable-only; no hard-coded colors
   - Compact: no extra padding added beyond existing
*/
body.bk-mapper-page{
  /* Copper base theme for mapper page */
  background: var(--theme-copper-bg, var(--bg-body, transparent));
}

/* Stronger but still soft boundaries using existing vars */
#mapper-topbar{
  background: var(--bg-panel, transparent);
  border-bottom: var(--border-soft, 1px solid rgba(0,0,0,.12));
}
#tool-shelf{
  background: var(--bg-panel-soft, var(--bg-panel, transparent));
  border-right: var(--border-soft, 1px solid rgba(0,0,0,.12));
}
#mapper-canvas-wrap{
  background: var(--bg-panel, transparent);
}
#mapper-status{
  background: var(--bg-panel-soft, var(--bg-panel, transparent));
  border-top: var(--border-soft, 1px solid rgba(0,0,0,.12));
}

/* Make the canvas region unmistakable without wasting space */
#mapper-canvas{
  background: var(--bg-panel, transparent);
}

/* Drawer separation a touch clearer (still variable-only) */
.drawer{
  border-bottom: var(--border-soft, 1px solid rgba(0,0,0,.10));
}



/* v0.2.42: copper theme actually visible
   Many site pages set body background via shared CSS. To avoid !important and keep
   variable-only rules, we paint the copper gradient on html and make body transparent.
*/
html{
  background: var(--theme-copper-bg, var(--bg-body, transparent));
}
body.bk-mapper-page{
  background: transparent;
}



/* v0.2.42: force copper background via full-page wrapper (no !important, variable-only)
   Shared CSS may paint html/body backgrounds; wrapper guarantees visible copper theme.
*/
#mapper-root{
  min-height: 100vh;
  background: var(--theme-copper-bg, var(--bg-body, transparent));
}



/* v0.2.42: copper visibility guaranteed
   Why copper wasn't visible: every region was painting opaque panel backgrounds
   that covered the full viewport. Copper can exist "under" the UI but never show.
   Fix: paint copper on #mapper-root AND give Regions 2–5 a copper surface too.
   Still variable-only; no !important.
*/

/* Make wrapper a real full-viewport surface */
#mapper-root{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--theme-copper-bg, var(--bg-body, transparent));
}

/* Ensure main content consumes remaining height inside wrapper */
#mapper-main{ flex: 1; min-height: 0; }

/* Copper surfaces for mapper-owned regions */
#mapper-topbar,
#tool-shelf,
#mapper-canvas-wrap,
#mapper-status{
  background: var(--theme-copper-bg, var(--bg-panel, transparent));
}

/* Keep inner functional surfaces readable with existing panel vars */
#tool-shelf .drawer > summary,
#tool-shelf .drawer-body{
  background: var(--bg-panel-soft, var(--bg-panel, transparent));
}

/* Canvas: copper around, panel inside */
#mapper-canvas{
  background: var(--bg-panel, transparent);
}

/* Slightly clearer boundaries using existing border var */
#mapper-topbar{ border-bottom: var(--border-soft, 1px solid rgba(0,0,0,.12)); }
#tool-shelf{ border-right: var(--border-soft, 1px solid rgba(0,0,0,.12)); }
#mapper-status{ border-top: var(--border-soft, 1px solid rgba(0,0,0,.12)); }



/* v0.2.42: site cohesion pass
   Goals:
   1) Copper base page visible
   2) Top-level mapper panels use Silver theme
   3) Panels clearly visible with rounded corners
   4) Minimal spacing: 5px between panels, 2px internal padding
   Notes:
   - variable-only, no !important
*/

/* Copper base surface */
#mapper-root{
  background: var(--theme-copper-bg, var(--bg-body, transparent));
}

/* Shared panel geometry */
:root{
  --mapper-gap: 5px;
  --mapper-inset: 2px;
  --mapper-radius: 12px;
}

/* Make mapper-owned regions sit "on" copper with small gaps */
#mapper-topbar,
#tool-shelf,
#mapper-canvas-wrap,
#mapper-status{
  background: var(--theme-silver-bg, var(--bg-panel, transparent));
  border: var(--border-soft, 1px solid rgba(0,0,0,.12));
  border-radius: var(--mapper-radius);
}

/* Region spacing (5px between panels; copper shows through) */
#mapper-topbar{
  margin: var(--mapper-gap);
  padding: var(--mapper-inset);
}

#mapper-status{
  margin: 0 var(--mapper-gap) var(--mapper-gap) var(--mapper-gap);
  padding: var(--mapper-inset);
}

#mapper-main{
  margin: 0 var(--mapper-gap);
  gap: var(--mapper-gap);
}

/* Shelf + canvas internal padding kept tight */
#tool-shelf{
  padding: var(--mapper-inset);
}
#mapper-canvas-wrap{
  padding: var(--mapper-inset);
}

/* Canvas fills its panel */
#mapper-canvas{
  background: var(--bg-panel, transparent);
  border-radius: calc(var(--mapper-radius) - 2px);
}

/* Shelf drawers: keep them readable; minimal padding */
.drawer > summary{
  padding: .25rem .35rem;
}
.drawer-body{
  padding: .25rem .35rem;
}



/* v0.2.42: Top Bar Zoom (2.4) + Drawer styling (silver header + gold inner card)
   - Zoom controls always visible; disabled until a map is loaded
   - Drawer summary stays silver (panel surface); drawer contents sit in gold card
   - Padding rules: 5px between top-level panels already; 2px inside panels
*/

/* Zoom controls */
.zoom-wrap{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space:nowrap;
}
.zoom-label{
  font-size: .85rem;
  opacity: .9;
}
#zoom-slider{
  width: 140px;
}
.zoom-readout{
  font-size: .85rem;
  opacity: .9;
  min-width: 3.5rem;
  text-align: right;
}

/* Drawer header line = silver (inherits panel background); ensure it's visually distinct */
.drawer > summary{
  background: var(--theme-silver-bg, transparent);
  border-radius: 8px;
}

/* Drawer body minimal padding; gold card provides surface */
.drawer-body{
  padding: var(--mapper-inset, 2px);
}
.drawer-card{
  background: var(--theme-gold-bg, var(--bg-panel, transparent));
  border: var(--border-soft, 1px solid rgba(0,0,0,.12));
  border-radius: 10px;
  padding: var(--mapper-inset, 2px);
}



/* v0.2.42: cohesion + iconography
   1) Drawer headings (File/Grid/...) are silver
   2) Drawer contents card is copper (not gold)
   3) Use native disclosure triangle (site cohesion)
   4) Shelf title bold + +2px, no icon; click title to collapse
   5) Mode buttons are icons
*/

/* Tool shelf title */
.shelf-title{
  font-weight: 700;
  font-size: calc(0.8rem + 2px);
  cursor: pointer;
}

/* Drawer headings line (summary) */
.drawer > summary{
  background: var(--theme-silver-bg, var(--bg-panel-soft, transparent));
  border: var(--border-soft, 1px solid rgba(0,0,0,.12));
  border-radius: 10px;
}

/* Restore native disclosure marker (triangle) */
.drawer > summary::-webkit-details-marker{ display: list-item; }
.drawer > summary{ list-style: revert; }

/* Drawer body copper card */
.drawer-card{
  background: var(--theme-copper-bg, var(--bg-panel, transparent));
  border: var(--border-soft, 1px solid rgba(0,0,0,.12));
}

/* Make inner inputs readable atop copper */
.drawer-card select,
.drawer-card input,
.drawer-card button{
  background: var(--bg-panel, transparent);
}

/* Mode icon buttons */
.mode-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 28px;
  padding: 0;
}
.mode-btn svg{ display:block; }



/* v0.2.42: Tool Shelf toggle via edge tab + drawer summary silver + site-style triangle marker
   - Toggle is a dedicated tab on shelf edge (site cohesion)
   - Drawer titles are silver (not gold)
   - Drawer expand/collapse indicator is a clean triangle chevron (CSS), consistent across browsers
*/

/* Shelf tab toggle */
#tool-shelf{ position: relative; }
.shelf-tab{
  position:absolute;
  top: 12px;
  right: -14px;           /* hang over the gap */
  width: 26px;
  height: 38px;
  border-radius: 10px;
  border: var(--border-soft, 1px solid rgba(0,0,0,.12));
  background: var(--theme-silver-bg, var(--bg-panel, transparent));
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
/* triangle icon inside the tab */
.shelf-tab::before{
  content:"";
  width:0;height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:8px solid var(--text-main, #000);
  opacity:.75;
}
#tool-shelf.collapsed .shelf-tab{ right: -14px; }
#tool-shelf.collapsed .shelf-tab::before{
  border-left:0;
  border-right:8px solid var(--text-main, #000);
}

/* Drawer titles: force silver surface with enough specificity to override any global styles */
#tool-shelf details.drawer > summary{
  background: var(--theme-silver-bg, var(--bg-panel-soft, transparent));
  border: var(--border-soft, 1px solid rgba(0,0,0,.12));
  border-radius: 10px;
}

/* Replace default marker with consistent triangle (site cohesion across browsers) */
#tool-shelf details.drawer > summary{
  list-style: none;
}
#tool-shelf details.drawer > summary::-webkit-details-marker{ display:none; }

#tool-shelf details.drawer > summary::before{
  content:"";
  width:0;height:0;
  border-left:6px solid var(--text-main, #000);
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  opacity:.65;
  margin-right: 8px;
}
#tool-shelf details.drawer[open] > summary::before{
  transform: rotate(90deg);
  transform-origin: 2px 4px;
}

/* Keep header row layout tidy with the new marker */
#tool-shelf details.drawer > summary{
  display:flex;
  align-items:center;
  gap:.35rem;
}

/* Ensure copper card only applies to drawer contents, not the title strip */
#tool-shelf .drawer-card{
  background: var(--theme-copper-bg, var(--bg-panel, transparent));
}

/* Collapsed state hides drawer contents but keeps tab visible */
#tool-shelf.collapsed{
  width: var(--mapper-shelf-w-collapsed, 2.4rem);
}
#tool-shelf.collapsed .drawer > summary span.txt{ display:none; }
#tool-shelf.collapsed .drawer-body{ display:none; }



/* v0.2.42: shelf tab visibility + collapsed defaults + cohesion
   1) Slightly reduce default shelf width so tab is not tight to canvas edge
   2) Ensure tab is clickable (z-index) and not covered by canvas panel
*/
:root{
  --mapper-shelf-w: calc(14rem - 5px);
}

/* Ensure the tab is visible and clickable above neighboring panel */
#tool-shelf{ z-index: 5; }
.shelf-tab{ z-index: 20; }

/* Canvas panel below tab overlap */
#mapper-canvas-wrap{ z-index: 1; }

/* Give a tiny extra left breathing room so the tab isn't visually cramped */
#mapper-canvas-wrap{ margin-left: 0px; }



/* v0.2.42: debug overlay + shelf tab clickability + grid visibility
   - Fix tab hitbox being clipped by overflow
   - Add on-page debug overlay for ?debug=1
*/
#tool-shelf{
  overflow: visible;
  position: relative;
  z-index: 5;
}
#shelf-scroll{
  overflow: auto;
  max-height: 100%;
}
.shelf-tab{
  z-index: 30001;
  pointer-events: auto;
}

/* Debug overlay (only shown when ?debug=1 via JS) */
#debug-overlay{
  display:none;
  position: fixed;
  right: 10px;
  bottom: 10px;
  left: auto;
  top: auto;
  width: 240px;
  max-width: 240px;
  max-height: 180px;
  overflow: hidden;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  font-size: 12px;
  line-height: 1.25;
  background: var(--bg-panel, rgba(255,255,255,.90));
  border: var(--border-soft, 1px solid rgba(0,0,0,.15));
  border-radius: 12px;
  padding: 8px 10px;
  z-index: 30000;
  white-space: pre-wrap;
  pointer-events: none;
}
#debug-overlay.show{ display:block; }



/* v0.2.42: shelf tab is sibling of tool-shelf so it can't be clipped */
#mapper-main{ position: relative; }
.shelf-tab{
  position: absolute;
  left: calc(var(--mapper-gap, 5px) + var(--mapper-shelf-w, 14rem) - 13px);
  top: calc(var(--mapper-gap, 5px) + 12px);
  z-index: 30001;
}
/* when collapsed, move tab near collapsed width */
#tool-shelf.collapsed ~ .shelf-tab{
  left: calc(var(--mapper-gap, 5px) + var(--mapper-shelf-w-collapsed, 2.4rem) - 13px);
}



/* v0.2.42: make Tools shelf collapse deterministic + ensure tab clickability */
#tool-shelf{
  flex: 0 0 auto;
  min-width: var(--mapper-shelf-w-collapsed, 2.4rem);
}
#tool-shelf.collapsed{
  width: var(--mapper-shelf-w-collapsed, 2.4rem) !important;
  max-width: var(--mapper-shelf-w-collapsed, 2.4rem) !important;
}
#tool-shelf.collapsed #shelf-scroll{ display:none; }
#tool-shelf.collapsed .shelf-row{ justify-content:center; }

/* tab should always receive pointer events */
.shelf-tab{
  pointer-events: auto;
  z-index: 40000;
}



/* v0.2.42: tier selector + unified zoom UI (compact) */
#tb-scale{
  display:flex;
  align-items:center;
  gap:6px;
}
.tier-label{
  font-size:.85rem;
  opacity:.9;
}
#tier-select{
  max-width: 9.5rem;
}



/* v0.2.42: Cell drawer read-only fields (compact) */
.cell-grid{
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.cell-row{
  display:flex;
  justify-content:space-between;
  gap: 8px;
}
.cell-k{
  font-size:.82rem;
  opacity:.85;
  white-space:nowrap;
}
.cell-v{
  font-size:.82rem;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  text-align:right;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
  max-width: 10rem;
}
.cell-hint{
  margin-top: 6px;
  font-size: .8rem;
  opacity: .75;
}



/* v0.2.42: Grid drawer configurable (per-tier size, hex orientation, snap visual-only) */
.grid-grid{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.grid-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 8px;
}
.grid-k{
  font-size:.82rem;
  opacity:.85;
  white-space:nowrap;
}
#grid-size{
  width: 6.2rem;
  text-align: right;
}
.snap-lab{
  display:flex;
  align-items:center;
  gap: 6px;
}
.snap-txt{
  font-size:.82rem;
  opacity:.9;
}
.grid-hint{
  margin-top: 6px;
  font-size: .8rem;
  opacity: .75;
}



/* v0.2.42: Grid drawer sizing + origin controls */
#grid-size, #grid-w, #grid-h, #square-distance{
  width: 10.5rem; /* match typical select width */
  text-align: right;
}
#grid-type, #hex-orientation{
  width: 10.5rem;
}
.origin-wrap{
  display:flex;
  gap:6px;
}
#origin-x, #origin-y{
  width: 5.1rem;
  text-align: right;
}
.nudge-wrap{
  display:flex;
  gap:4px;
  flex-wrap: wrap;
  justify-content:flex-end;
}



/* v0.2.42: File drawer scaffolding (compact) */
.file-grid{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.file-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.file-k{
  font-size:.82rem;
  opacity:.85;
  white-space:nowrap;
}
#map-name{
  width: 10.5rem;
}
.file-v{
  font-size:.82rem;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  text-align:right;
}
.file-hint{
  margin-top:6px;
  font-size:.8rem;
  opacity:.75;
}



/* v0.2.42: Origin inputs fit within Grid drawer */
.origin-wrap{
  display:flex;
  gap:6px;
  align-items:center;
}
.origin-wrap input{
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  text-align: right;
}



/* v0.2.42: icon buttons for file actions + view toggle */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 28px;
  padding: 0;
  border-radius: 10px;
}
.icon-btn svg{ display:block; }

.file-actions{
  justify-content:flex-end;
  gap: 6px;
}
#tb-tool{
  display:flex;
  align-items:center;
  gap: 8px;
}



/* v0.3.4: Hex tier scale editor */
#hex-tier-config{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top: 2px;
}
.hex-tier-head{
  font-size:.82rem;
  font-weight:700;
  opacity:.9;
  padding-top: 2px;
}
.hex-tier-row,
.hex-tier-legend{
  display:grid;
  grid-template-columns: 4.8rem minmax(0,1fr) 5.4rem;
  align-items:center;
  gap:8px;
}
.hex-tier-name{
  font-size:.82rem;
  opacity:.9;
  white-space:nowrap;
}
.tier-distance,
.tier-factor{
  min-width:0;
  box-sizing:border-box;
}
.tier-distance{
  width:100%;
}
.tier-factor{
  width:5.4rem;
  text-align:right;
}
.hex-tier-legend{
  font-size:.74rem;
  opacity:.72;
  padding-top: 2px;
}
.hex-tier-legend span:first-child{
  grid-column:2;
}
.hex-tier-legend span:last-child{
  grid-column:3;
  text-align:right;
}


/* v0.3.5: square distance editor */
#square-distance{
  width: 10.5rem;
  text-align: right;
}


.hex-tier-row{
  display:grid;
  grid-template-columns: minmax(84px, 1fr) minmax(92px, 1.3fr) 92px;
  gap:8px;
  align-items:center;
}
.hex-tier-legend-head{
  display:grid;
  grid-template-columns: minmax(84px, 1fr) minmax(92px, 1.3fr) 92px;
  gap:8px;
  font-size:12px;
  opacity:.8;
  margin-bottom:6px;
}
.tier-name-input{
  min-width:0;
}


/* v0.5.10 topbar tier distance readout */
.tier-distance-readout{display:inline-flex;align-items:center;min-height:30px;padding:0 8px;border-radius:999px;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.7);font-size:.82rem;white-space:nowrap}#tb-scale{gap:8px}

#map-picker{width:100%;min-width:0;}
.file-row select{min-height:32px;}