/* Terra Nova community atlas - viewer and editor.
 * Colours, radii and type follow the terra-nova.online design tokens so the
 * atlas sits inside the shard's look; the blue accent and the community badge
 * keep it visibly a player-made companion rather than an official page. */

:root {
  /* --- shard tokens --- */
  --bg:          #05060a;
  --bg-alt:      #0a0e16;
  --panel:       #0f141d;
  --panel-hi:    #151b26;
  --panel-hover: #1e2635;
  --text:        #f5f5f7;
  --text-dim:    #9ba2b1;
  --text-faint:  #6b7480;
  --gold:        #e8a84b;
  --gold-bright: #facc6b;
  --gold-deep:   #b45309;
  --on-gold:     #11151c;
  --online:      #4ade80;
  --info:        #38bdf8;
  --danger:      #e45858;
  --here:        #ff4d4f;   /* the "you are here" pin, the one red on the map */
  --line:        rgba(148,163,184,.13);
  --line-strong: rgba(148,163,184,.28);
  --line-gold:   rgba(232,168,75,.38);
  --line-info:   rgba(56,189,248,.34);
  --shadow-sm:   0 2px 8px rgba(0,0,0,.4);
  --shadow-md:   0 12px 32px -12px rgba(0,0,0,.75);
  --shadow-lg:   0 28px 60px -20px rgba(0,0,0,.85);
  --glow:        0 0 0 1px var(--line-gold), 0 18px 40px -18px rgba(232,168,75,.35);
  --radius:      14px;
  --radius-sm:   8px;
  --font-display: "Cinzel", "Trajan Pro", "Iowan Old Style", Georgia, serif;
  --font-body:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* the atlas leans on the shard's info blue for anything interactive */
  --accent:      var(--info);
  --accent-soft: rgba(56,189,248,.13);
  --header-h:    60px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
body { overflow: hidden; }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; letter-spacing: .01em; margin: 0; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-bright); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,.22); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.4); background-clip: padding-box; }

/* ------------------------------------------------------------------ */
/* frame                                                               */
/* ------------------------------------------------------------------ */

.app {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  height: 100dvh;
}

.topbar {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--header-h);
  padding: 8px clamp(10px, 2vw, 20px);
  background: rgba(5, 6, 10, .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand .mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-gold);
  background: radial-gradient(120% 120% at 30% 0, rgba(232,168,75,.22), transparent 70%), var(--panel-hi);
  color: var(--gold-bright);
}
.brand h1 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.brand .sub {
  font-family: var(--font-body);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-info);
  background: var(--panel-hi);
  color: var(--text-dim);
  font-size: .76rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--info); box-shadow: 0 0 9px var(--info); flex: none; }
.badge.is-edit { border-color: var(--line-gold); color: var(--gold-bright); }
.badge.is-edit .dot { background: var(--gold); box-shadow: 0 0 9px var(--gold); }
.badge[hidden] { display: none; }
.badge.presence { border-color: var(--line-strong); font-variant-numeric: tabular-nums; }
.badge.presence .dot { background: var(--online); box-shadow: 0 0 9px var(--online); }
.badge.presence.has-editors { border-color: var(--line-gold); }

.spacer { flex: 1 1 auto; }

.main { display: grid; grid-template-columns: minmax(0,1fr) 356px; min-height: 0; }
.map-wrap { position: relative; min-width: 0; min-height: 0; background: var(--bg-alt); }

/* ------------------------------------------------------------------ */
/* controls                                                            */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: rgba(21, 27, 38, .7);
  color: var(--text);
  font: inherit;
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .03em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { background: var(--panel-hover); border-color: var(--line-strong); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(56,189,248,.45); }
.btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.btn.is-on { border-color: var(--line-gold); background: rgba(232,168,75,.14); color: var(--gold-bright); }

.btn-primary {
  background: linear-gradient(135deg, var(--gold-bright) 0, var(--gold) 55%, #cf8f33 100%);
  border-color: transparent;
  color: var(--on-gold);
  font-weight: 650;
}
.btn-primary:hover { background: linear-gradient(135deg,#ffd88a 0, var(--gold-bright) 55%, #d99a3c 100%); box-shadow: 0 16px 34px -14px rgba(232,168,75,.75); }
.btn-danger { border-color: var(--danger); background: transparent; color: var(--danger); }
.btn-danger:hover { background: rgba(228,88,88,.12); border-color: var(--danger); color: #ff8a8a; }
.btn-icon { padding: 8px 9px; }
.btn .tn-ic { flex: none; }

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: rgba(21,27,38,.7); }
.seg .btn { border: 0; border-radius: 0; border-right: 1px solid var(--line); background: transparent; }
.seg .btn:last-child { border-right: 0; }
.seg .btn.is-on { background: rgba(232,168,75,.16); }

.field { display: block; margin-bottom: 12px; }
.field > span {
  display: block;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}

input[type=text], input[type=password], input[type=number], input[type=url], textarea, select {
  width: 100%;
  padding: 9px 11px;
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: .86rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
textarea { resize: vertical; min-height: 88px; line-height: 1.55; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--line-gold); box-shadow: 0 0 0 2px rgba(232,168,75,.16); }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input[type=color] { width: 44px; height: 36px; padding: 2px; background: var(--bg-alt); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; }
input[type=checkbox] { accent-color: var(--gold); width: 15px; height: 15px; }

.search { position: relative; flex: 0 1 260px; }
.search input { padding-left: 32px; }
.search .tn-ic { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }

/* ------------------------------------------------------------------ */
/* map surface                                                         */
/* ------------------------------------------------------------------ */

.mv-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(60rem 32rem at 18% 0, rgba(232,168,75,.07), transparent 62%),
    radial-gradient(52rem 30rem at 88% 80%, rgba(56,189,248,.06), transparent 66%),
    var(--bg-alt);
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.mv-stage.is-panning { cursor: grabbing; }
.mv-stage.cur-add, .mv-stage.cur-draw { cursor: crosshair; }

.mv-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
/* Only hint the compositor while the map is actually moving. Leaving the hint
   on permanently freezes the raster at one zoom level, which is what made
   symbols and the map go soft after zooming in. See _setMoving in mapview.js. */
.mv-stage.is-moving .mv-world { will-change: transform; }
.mv-img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.mv-svg { position: absolute; top: 0; left: 0; overflow: visible; }
.mv-hit { cursor: pointer; }

.mv-region { fill-opacity: .16; transition: fill-opacity .16s ease, stroke-width .16s ease, opacity .28s ease; }

/* outside its band of zoom: faded away rather than snapped out, and deaf to
   the pointer while it is going */
.mv-regions .is-away,
.mv-markers.is-away { opacity: 0; pointer-events: none; }
.mv-markers { transition: opacity .28s ease; }
.mv-region:hover { fill-opacity: .27; }
.mv-region.is-hot { fill-opacity: .34; stroke-width: 3.5px; }
.mv-region.is-sel { stroke-width: 3px; stroke-dasharray: 7 4; }

.mv-label { pointer-events: none; }
.mv-rlabel-t {
  font: 600 12.5px/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  paint-order: stroke fill;
  stroke: rgba(5,6,10,.92);
  stroke-width: 3.6px;
  stroke-linejoin: round;
}
.mv-mlabel-t {
  font: 500 11px/1 var(--font-body);
  letter-spacing: .02em;
  paint-order: stroke fill;
  stroke: rgba(5,6,10,.94);
  stroke-width: 3.2px;
  stroke-linejoin: round;
}
.mv-label.is-focus .mv-rlabel-t,
.mv-label.is-focus .mv-mlabel-t {
  font-weight: 700;
  fill: #fff !important;
}
.mv-label.is-focus .mv-mlabel-t { font-size: 12px; stroke-width: 3.4px; }
.mv-label.is-focus .mv-rlabel-t { stroke-width: 4px; }

.mv-label.is-hot .mv-rlabel-t,
.mv-label.is-sel .mv-rlabel-t,
.mv-label.is-hot .mv-mlabel-t,
.mv-label.is-sel .mv-mlabel-t { fill: #fff !important; }

/* One circle plus one glyph per symbol. The fewer painted nodes each one
   costs, the more of them the map carries at full zoom-out. */
.mv-disc   { fill: rgba(10,14,22,.94); stroke-width: 2.2px; }
.mv-halo   {
  visibility: hidden;        /* hidden skips paint entirely, opacity 0 does not */
  opacity: 0;
  stroke-width: 2.4px;
  transform-box: fill-box;
  transform-origin: center;
}
.mv-marker.is-hot .mv-halo,
.mv-marker.is-sel .mv-halo { visibility: visible; }
.mv-marker:hover .mv-disc { fill: var(--panel-hi); stroke-width: 3px; }
.mv-marker.is-hot .mv-halo { opacity: .95; animation: mvPulse 1.5s ease-out infinite; }
.mv-marker.is-hot .mv-disc { stroke-width: 3.2px; }
.mv-marker.is-sel .mv-halo { opacity: 1; stroke-dasharray: 5 4; animation: none; }
.mv-marker.is-drag .mv-disc { stroke-width: 3.4px; }

/* a group of crowded symbols: a ring behind hints at the stack, the badge
   says how many are hiding in there */
.mv-cluster .mv-stack { opacity: .38; stroke-width: 1.6px; }
.mv-cluster:hover .mv-stack { opacity: .7; }
.mv-count circle { stroke: rgba(5,6,10,.9); stroke-width: 1.5px; }
.mv-count text {
  font: 700 9.5px/1 var(--font-body);
  fill: #0a0e16;
  letter-spacing: -.02em;
}

@keyframes mvPulse {
  0%   { transform: scale(1);    opacity: .95; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* the "you were sent here" pin */
.mv-pin { pointer-events: none; }
.mv-pin-drop {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: mvPinDrop .42s cubic-bezier(.2, .9, .3, 1.4) both;
}
.mv-pin-body { stroke: rgba(5,6,10,.9); stroke-width: 2px; }
.mv-pin-shadow { fill: rgba(0,0,0,.45); transform: translate(1px, 2px); }
.mv-pin-eye { fill: rgba(5,6,10,.92); }
.mv-ping {
  stroke-width: 2.5px;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: mvPing 2.2s ease-out 3;
}
.mv-ping-b { animation-delay: .55s; }

@keyframes mvPinDrop {
  0%   { transform: translateY(-16px) scale(.7); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes mvPing {
  0%   { transform: scale(.65); opacity: .9; }
  70%  { transform: scale(2.4);  opacity: 0; }
  100% { transform: scale(2.4);  opacity: 0; }
}

/* the "you are here" pin: a position handed over from the game, standing on
   the bare picture rather than on any annotation, so it is deliberately the
   one red thing on the map and it keeps pulsing instead of settling down */
.mv-here-pin { pointer-events: none; }
.mv-here-body { fill: var(--here); }
.mv-here-ping { stroke: var(--here); stroke-width: 2.5px; animation-iteration-count: infinite; }
.mv-here-dot { fill: #fff; stroke: rgba(5,6,10,.85); stroke-width: 1.4px; }
.mv-here-t {
  font: 600 11.5px/1 var(--font-body);
  letter-spacing: .02em;
  fill: #fff;
  paint-order: stroke fill;
  stroke: rgba(5,6,10,.94);
  stroke-width: 3.4px;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .mv-pin-drop { animation: none; }
  .mv-ping { animation: none; opacity: .5; }
  .mv-here-ping { animation: none; opacity: .55; }
  .mv-marker.is-hot .mv-halo { animation: none; }
}

/* editing handles */
.mv-vertex { fill: var(--bg-alt); stroke: var(--gold-bright); stroke-width: 2px; cursor: move; }
.mv-vertex:hover { fill: var(--gold-bright); }
.mv-vertex.is-first { stroke: var(--online); }
.mv-mid { fill: rgba(232,168,75,.3); stroke: rgba(232,168,75,.8); stroke-width: 1.4px; cursor: copy; }
.mv-mid:hover { fill: var(--gold-bright); }
.mv-draft { fill: rgba(232,168,75,.13); stroke: var(--gold); stroke-width: 2px; stroke-dasharray: 6 4; }
.mv-draft-line { stroke: rgba(232,168,75,.65); stroke-width: 1.6px; stroke-dasharray: 4 4; fill: none; }
.mv-measure { stroke: var(--info); stroke-width: 2px; stroke-dasharray: 6 4; fill: none; }
.mv-measure-dot { fill: var(--info); }

/* floating map controls */
.map-tools {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.map-tools .btn { background: rgba(15,20,29,.94); }

.map-meta {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 12;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(15,20,29,.94);
  font: 11px/1 var(--font-mono);
  color: var(--text-faint);
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* tooltip                                                             */
/* ------------------------------------------------------------------ */

.tip {
  position: fixed;
  z-index: 80;
  max-width: 300px;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
}
.tip.is-on { opacity: 1; transform: none; }
.tip-head { display: flex; align-items: center; gap: 9px; }
.tip-title { font-family: var(--font-display); font-size: .95rem; font-weight: 600; letter-spacing: .02em; }
.tip-cat { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-top: 3px; }
.tip-desc { margin-top: 8px; font-size: .8rem; line-height: 1.55; color: var(--text-dim); white-space: pre-wrap; }
.tip-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  max-height: 210px;
  overflow: hidden;
}
.tip-list li {
  display: flex;
  gap: 7px;
  align-items: baseline;
  font-size: .8rem;
  line-height: 1.35;
  color: var(--text-dim);
}
.tip-list li b { color: var(--text); font-weight: 500; }
.tip-list .more { color: var(--text-faint); font-style: italic; }

.tip-hint { margin-top: 8px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }

/* ------------------------------------------------------------------ */
/* sidebar                                                             */
/* ------------------------------------------------------------------ */

.side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  z-index: 20;
  background:
    radial-gradient(30rem 16rem at 100% 0, rgba(232,168,75,.07), transparent 68%),
    var(--panel);
  border-left: 1px solid var(--line);
}

.side-head { padding: 11px 13px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
.side-head .row { display: flex; gap: 6px; align-items: center; }
.side-count { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.side-body { overflow: auto; flex: 1 1 auto; padding: 8px 8px 44px; }

.cat { margin: 3px 0 8px; }
.cat-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background .16s ease;
}
.cat-head:hover { background: rgba(255,255,255,.035); }
.cat-swatch { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; flex: none; border: 1px solid var(--line); }
.cat-name { flex: 1 1 auto; font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.cat-num { font: 11px/1 var(--font-mono); color: var(--text-faint); }
.cat-eye { border: 0; background: none; color: var(--text-faint); cursor: pointer; padding: 3px; display: grid; place-items: center; border-radius: 6px; }
.cat-eye:hover { color: var(--text); background: rgba(255,255,255,.07); }
.cat.is-off .cat-name, .cat.is-off .cat-swatch { opacity: .35; }
.cat.is-collapsed .cat-items { display: none; }
.cat-chev { color: var(--text-faint); transition: transform .18s ease; flex: none; }
.cat.is-collapsed .cat-chev { transform: rotate(-90deg); }
.cat-items { padding: 2px 0 4px 9px; }

.item {
  --depth: 0;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 9px;
  padding-left: calc(9px + var(--depth) * 16px);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
/* An area drawn inside a bigger area of the same kind steps in under it, with
 * a hairline back to the parent so the run of rows reads as one place. */
.item.is-sub::before {
  content: '';
  position: absolute;
  left: calc(var(--depth) * 16px + 1px);
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--line-strong);
}
.item.is-sub .item-name { font-size: .81rem; }
.item:hover, .item.is-hot { background: var(--accent-soft); border-left-color: var(--accent); }
.item.is-sel { background: rgba(232,168,75,.15); border-left-color: var(--gold); }
.item:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(56,189,248,.4); }
.item-ic { flex: none; margin-top: 1px; }
.item-txt { min-width: 0; flex: 1 1 auto; }
.item-name { display: block; font-size: .84rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-sub { display: block; font-size: .74rem; color: var(--text-faint); line-height: 1.4; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-tag { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--line-strong); border-radius: 4px; padding: 2px 5px; flex: none; margin-top: 2px; }
.item mark { background: rgba(56,189,248,.28); color: var(--text); border-radius: 3px; }

/* language switch: a fixed-width pill so the header does not jump */
.btn-lang {
  min-width: 44px;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  padding: 8px 10px;
}

/* the invitation to contribute, sitting under the list header */
.btn-suggest {
  width: 100%;
  justify-content: center;
  border-style: dashed;
  border-color: var(--line-info);
  color: var(--text-dim);
  font-size: .8rem;
}
.btn-suggest:hover { border-style: solid; color: var(--text); background: var(--accent-soft); }

.sg-spot { font-size: .78rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* what an area contains, listed inside its detail card */
.inside { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 11px; }
.inside h3 {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 9px;
}
.inside-cat {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 3px;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.inside-cat b { margin-left: auto; font-family: var(--font-mono); font-weight: 400; }
.inside-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.inside-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 7px;
  border-radius: 6px;
  font-size: .82rem;
  color: var(--text-dim);
  cursor: pointer;
  border-left: 2px solid transparent;
}
.inside-list li:hover { background: var(--accent-soft); border-left-color: var(--accent); color: var(--text); }
.inside-list li:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(56,189,248,.4); }

/* proposals that are not on the map yet: dashed, faded, clearly provisional */
.mv-gh-area {
  fill-opacity: .09;
  stroke-width: 2px;
  stroke-dasharray: 7 5;
  opacity: .85;
  cursor: pointer;
}
.mv-gh-area:hover { fill-opacity: .18; opacity: 1; }
.mv-gh { cursor: pointer; }
.mv-gh-disc {
  fill: rgba(10,14,22,.82);
  stroke-width: 2px;
  stroke-dasharray: 4 3;
}
.mv-gh:hover .mv-gh-disc { fill: var(--panel-hi); stroke-dasharray: none; }
.mv-gh-mark { stroke-width: 2.4px; stroke-linecap: round; fill: none; }
.mv-gh-tag {
  font: 600 10px/1 var(--font-body);
  letter-spacing: .04em;
  paint-order: stroke fill;
  stroke: rgba(5,6,10,.92);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* reviewing one without leaving the map */
.sugpop {
  position: absolute;
  z-index: 24;
  width: 290px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--info);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  box-shadow: var(--shadow-lg);
}
.sugpop[hidden] { display: none; }
.sugpop .sug-x { margin-left: auto; padding: 3px 5px; border: 0; background: none; color: var(--text-faint); }
.sugpop .sug-x:hover { color: var(--text); background: rgba(255,255,255,.07); }
.sugpop .sug-body { max-height: 150px; overflow: auto; }

.sg-seg { width: 100%; }
.sg-seg .btn { flex: 1 1 0; justify-content: center; font-size: .8rem; }

/* the editor's suggestion inbox */
.badge-count {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  margin-left: -3px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--on-gold);
  font-size: .66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sug-list { display: grid; gap: 9px; max-height: 58vh; overflow: auto; margin-top: 4px; }
.sug {
  border: 1px solid var(--line);
  border-left: 3px solid var(--info);
  border-radius: var(--radius-sm);
  background: var(--panel-hi);
  padding: 11px 13px;
}
.sug.is-fix { border-left-color: var(--gold); }
.sug.is-done { opacity: .5; border-left-color: var(--line-strong); }
.sug-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sug-who { font-weight: 600; color: var(--text); }
.sug-kind {
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 1px 5px;
}
.sug-when { margin-left: auto; font-size: .7rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.sug-title { margin-top: 5px; font-family: var(--font-display); font-size: .95rem; color: var(--gold-bright); }
.sug-body { margin-top: 5px; font-size: .82rem; line-height: 1.55; color: var(--text-dim); white-space: pre-wrap; }
.sug-meta { margin-top: 6px; font-size: .72rem; color: var(--text-faint); }
.sug-actions { margin-top: 10px; display: flex; gap: 7px; }
.sug-actions .btn { padding: 6px 11px; font-size: .78rem; }

.empty { padding: 30px 18px; text-align: center; color: var(--text-faint); font-size: .84rem; line-height: 1.7; }

.detail {
  flex: none;
  max-height: 46%;
  overflow: auto;
  padding: 14px 15px 16px;
  border-top: 1px solid var(--line-gold);
  background: radial-gradient(24rem 10rem at 10% 0, rgba(232,168,75,.1), transparent 70%), var(--panel-hi);
}
.detail h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; color: var(--gold-bright); margin-bottom: 3px; }
.detail .detail-cat { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.detail p { margin: 10px 0 0; font-size: .84rem; line-height: 1.65; color: var(--text-dim); white-space: pre-wrap; }
.detail .detail-row { display: flex; align-items: flex-start; gap: 10px; }
.detail .detail-actions { margin-top: 13px; display: flex; gap: 7px; flex-wrap: wrap; }
.detail-close { margin-left: auto; }
.here-mark { display: inline-flex; margin-top: 1px; color: var(--here); }

/* ------------------------------------------------------------------ */
/* editor extras                                                       */
/* ------------------------------------------------------------------ */

.adm-tools { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

#props { flex: 0 0 auto; max-height: 58%; overflow: auto; border-bottom: 1px solid var(--line); }
#props:empty { display: none; }
#btnTilt svg { transition: transform .52s cubic-bezier(.4, 0, .2, 1); }

.syncbar {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  z-index: 18;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(94%, 700px);
  padding: 9px 10px 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-gold);
  background: rgba(15,20,29,.97);
  color: var(--gold-bright);
  font-size: .82rem;
  box-shadow: var(--shadow-md);
}
.syncbar[hidden] { display: none; }
.syncbar .btn { padding: 5px 11px; font-size: .78rem; }

.hint {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  z-index: 15;
  max-width: min(92%, 640px);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-gold);
  background: rgba(15,20,29,.96);
  color: var(--gold-bright);
  font-size: .78rem;
  letter-spacing: .02em;
  text-align: center;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
.syncbar:not([hidden]) ~ .hint { top: 62px; }

.panel-sec { border-bottom: 1px solid var(--line); padding: 13px; }
.panel-sec h3 {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.row-inline { display: flex; gap: 8px; align-items: center; }
.dirty-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--on-gold); display: inline-block; }

.locked-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  font-size: .78rem;
  letter-spacing: .04em;
  cursor: default;
}
.item-tag .tn-ic { display: block; }

.cat-editor { display: flex; flex-direction: column; gap: 7px; }
.cat-row { display: grid; grid-template-columns: 44px minmax(0,1fr) 25% 25% 32px; gap: 6px; align-items: center; }
.cat-row select, .cat-row input[type=text] { padding: 7px 9px; font-size: .8rem; }
.icon-pick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.icon-pick button {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  border-radius: 7px;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.icon-pick button:hover { border-color: var(--line-gold); color: var(--gold-bright); }
.icon-pick button.is-on { border-color: var(--gold); color: var(--gold-bright); background: rgba(232,168,75,.14); }

.vertex-list { font: 11.5px/1.65 var(--font-mono); color: var(--text-faint); }

/* ------------------------------------------------------------------ */
/* overlays                                                            */
/* ------------------------------------------------------------------ */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(60rem 32rem at 18% 0, rgba(232,168,75,.1), transparent 62%),
    rgba(5,6,10,.86);
  backdrop-filter: blur(4px);
}
.overlay[hidden] { display: none; }

.card {
  width: min(440px, 100%);
  max-height: 92vh;
  overflow: auto;
  padding: clamp(22px, 4vw, 30px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: radial-gradient(40rem 20rem at 20% 0, rgba(232,168,75,.1), transparent 70%),
              linear-gradient(180deg, var(--panel-hi), var(--panel));
  box-shadow: var(--shadow-lg);
}
.card.wide { width: min(660px, 100%); }
.card h2 { font-size: 1.3rem; font-weight: 600; letter-spacing: .05em; color: var(--gold-bright); margin-bottom: 6px; }
.card .sub { color: var(--text-faint); font-size: .82rem; line-height: 1.6; margin-bottom: 18px; }
.card .actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 18px; }
.msg { font-size: .8rem; margin-top: 11px; min-height: 18px; }
.msg.err { color: #ff9c9c; }
.msg.ok { color: var(--online); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 200;
  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--online);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  box-shadow: var(--shadow-md);
  font-size: .84rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast.is-err { border-left-color: var(--danger); }

.legend {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 12;
  max-height: calc(100% - 90px);
  overflow: auto;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(21,27,38,.97), rgba(15,20,29,.97));
  box-shadow: var(--shadow-md);
}
.legend[hidden] { display: none; }
.legend h4 {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; min-width: 190px; }
.legend li { display: flex; align-items: center; gap: 9px; font-size: .78rem; color: var(--text-dim); }

/* ------------------------------------------------------------------ */
/* responsive                                                          */
/* ------------------------------------------------------------------ */

.side-toggle { display: none; }

@media (max-width: 1020px) {
  .main { grid-template-columns: minmax(0,1fr); }
  .side {
    position: fixed;
    right: 0;
    top: var(--header-h);
    bottom: 0;
    width: min(370px, 90vw);
    transform: translateX(101%);
    transition: transform .24s ease;
    box-shadow: -18px 0 44px -20px #000;
  }
  .side.is-open { transform: none; }
  .side-toggle { display: inline-flex; }
  .brand .sub { display: none; }
  .search { flex-basis: 160px; }
}

@media (max-width: 720px) {
  .topbar { gap: 8px; padding: 8px 10px; }
  .brand h1 { font-size: .92rem; letter-spacing: .1em; }
  .hide-sm { display: none !important; }
  .badge { display: none; }
}

.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;
}