/* Customize page — dark, refined editor chrome (the map is styled by
   dist/malaysia-map.css). Inspired by a shader-editor layout. */
:root {
  --bg: #0a0a0c;        /* page */
  --side: #0d0d10;      /* sidebar */
  --row: rgba(255,255,255,.04);
  --row-hi: rgba(255,255,255,.07);
  --bd: rgba(255,255,255,.07);
  --bd2: rgba(255,255,255,.11);
  --fg: #e6e7ea;
  --muted: #74777f;
  --faint: #4a4d55;
  --amber: #e0a435;     /* the < > brackets */
  --name: #d4d7db;
  --pill: rgba(12,12,15,.62);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Code", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body {
  display: grid; grid-template-columns: 284px 1fr; height: 100vh;
  background: var(--bg); color: var(--fg); font-family: var(--font); overflow: hidden;
}
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5;
      stroke-linecap: round; stroke-linejoin: round; }

/* ---------- sidebar ---------- */
#sidebar { background: var(--side); border-right: 1px solid var(--bd); display: flex; flex-direction: column; min-height: 0; }

#brand { display: flex; align-items: center; gap: 10px; padding: 14px 14px; border-bottom: 1px solid var(--bd); }
#brand .logo { width: 20px; height: 20px; display: block; border-radius: 5px; }
#brand .wordmark { font-size: 13px; font-weight: 700; letter-spacing: .5px; }
#brand .spacer { flex: 1; }

.icon-btn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 7px; cursor: pointer; }
.icon-btn:hover { color: var(--fg); background: var(--row); border-color: var(--bd); }

#scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 16px; }
.sec { margin: 14px 4px 8px; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--faint); }
.sec:first-child { margin-top: 2px; }

/* preset swatches — just the colours */
.layer-list { display: flex; flex-wrap: wrap; gap: 9px; padding: 2px 4px; }
.swatch { width: 40px; height: 40px; padding: 0; border-radius: 8px; cursor: pointer;
  background-color: #1a1a1e; background-size: cover;
  border: 1px solid var(--bd2); transition: transform .08s ease; }
.swatch:hover { transform: translateY(-1px); }
.swatch.active { box-shadow: 0 0 0 2px var(--side), 0 0 0 3px var(--fg); }

/* color rows */
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 6px; font-size: 12.5px; }
.row label { color: var(--muted); }
.row input[type=color] { width: 30px; height: 22px; padding: 0; border: 1px solid var(--bd2); border-radius: 6px; background: none; cursor: pointer; }
.row input[type=range] { width: 120px; accent-color: #cfd2d6; }

/* code */
#code { background: #08080a; border: 1px solid var(--bd); border-radius: 9px; padding: 11px;
  font: 11.5px/1.6 var(--mono); color: #b9bdc4; white-space: pre-wrap; word-break: break-word;
  max-height: 220px; overflow: auto; }

/* dock */
.dock { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-top: 1px solid var(--bd); }
.export-btn { display: flex; align-items: center; gap: 8px; font: 600 12.5px var(--font); color: var(--fg);
  background: var(--row-hi); border: 1px solid var(--bd2); border-radius: 8px; padding: 8px 13px; cursor: pointer; }
.export-btn:hover { border-color: #4aa3ff66; color: #fff; }
.dock-icons { display: flex; gap: 4px; }
.dock .chev { margin-left: auto; }

/* signature footer */
.sig { display: flex; align-items: center; gap: 7px; padding: 11px 14px 15px;
  border-top: 1px solid var(--bd); font-size: 11.5px; color: var(--faint); text-decoration: none; }
.sig img { height: 18px; width: auto; opacity: .8; }
.sig:hover { color: var(--muted); }
.sig:hover img { opacity: 1; }

/* ---------- main canvas ---------- */
/* instant colour feedback while theming — drop the fill fade so the tiles
   recolour in sync with the background (keeps the drill opacity animations) */
#map .state { transition: opacity .5s ease, transform .6s ease; }
#map .district { transition: opacity .35s ease; }

#stage { position: relative; padding: 14px; }
#canvas { position: absolute; inset: 14px; border: 1px solid var(--bd2); border-radius: 12px; overflow: hidden; }
#map { width: 100%; height: 100%; }

/* overlay pill palette — flips with the map's lightness (JS sets .map-light).
   On light maps: solid dark pills + white text. On dark maps: readable with a
   light border. */
body { --pill-bg: rgba(10,10,13,.5); --pill-bd: rgba(255,255,255,.16); --pill-fg: #eef0f3; --pill-muted: #b9bcc3; }
body.map-light { --pill-bg: rgba(14,14,18,.92); --pill-bd: rgba(255,255,255,.08); --pill-fg: #ffffff; --pill-muted: #ced1d7; }

#reopen { display: none; position: absolute; top: 18px; left: 18px; z-index: 5;
  width: 30px; height: 30px; padding: 0; place-items: center; color: var(--pill-muted);
  background: var(--pill-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--pill-bd); border-radius: 8px; cursor: pointer; }
#reopen:hover { color: var(--pill-fg); }

/* floating overlays (pills) */
.ov { position: absolute; z-index: 4; display: flex; align-items: center;
  background: var(--pill-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--pill-bd); border-radius: 10px; color: var(--pill-muted); font-size: 12px; }
.ov-title { top: 12px; left: 12px; gap: 8px; padding: 7px 11px; color: var(--pill-fg); }
.ov-title svg { color: var(--pill-muted); }
.ov-title #title-name { font-family: var(--mono); font-size: 12px; }

.ov-modes { top: 12px; right: 12px; padding: 4px; gap: 2px; }
.mode { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 7px; cursor: pointer;
  font: 12px var(--font); color: var(--pill-muted); background: transparent; border: 1px solid transparent; }
.mode svg { width: 14px; height: 14px; }
.mode:hover { color: var(--pill-fg); }
.mode.on { color: var(--pill-fg); background: rgba(255,255,255,.14); }

.ov-actions { bottom: 16px; left: 50%; transform: translateX(-50%); padding: 6px; gap: 3px; }
.act { display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 8px; cursor: pointer;
  font: 600 12px var(--font); color: var(--pill-muted); background: transparent; border: 1px solid transparent; text-decoration: none; }
.act:hover { color: var(--pill-fg); background: rgba(255,255,255,.10); }

/* collapsed sidebar — single full-width column (the hidden sidebar leaves the
   grid, so the map must own the only track or it falls into a 0-width one) */
body.collapsed { grid-template-columns: 1fr; }
body.collapsed #sidebar { display: none; }
body.collapsed #reopen { display: grid; }

/* embed mode: pure map, no chrome */
body.embed { grid-template-columns: 1fr; }
body.embed #sidebar, body.embed .ov, body.embed #reopen { display: none; }
body.embed #stage { padding: 0; }
body.embed #canvas { inset: 0; border: 0; border-radius: 0; }

/* toast */
#toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: #16161a; color: var(--fg); font: 600 12.5px var(--font); padding: 10px 18px;
  border: 1px solid var(--bd2); border-radius: 999px; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 50; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* mobile: stack canvas over a shorter sidebar */
@media (max-width: 760px) {
  body { grid-template-columns: 1fr; grid-template-rows: 1fr 44vh; }
  #stage { order: -1; }
  #sidebar { border-right: none; border-top: 1px solid var(--bd); }
  .ov-actions { bottom: 10px; }
  /* the decorative theme-name title collides with the mode toggles on a narrow
     screen — hide it and centre the toggles across the top */
  .ov-title { display: none; }
  .ov-modes { right: auto; left: 50%; transform: translateX(-50%); }
  .mode { padding: 6px 8px; gap: 5px; }
}