/* Watchtower Corporate Network — map tool
   Light editorial chrome, dark map canvas. No external fonts, no CDN. */

/* Every value falls back to the site's own custom properties from css/main.css, so
   once this is wrapped in header.php the tool picks up the site palette — including
   the dark theme — without a second set of colours to maintain. The fallbacks after
   each comma are only used when the tool runs standalone here in staging. */
.cm, .cm-modal{
  --ink:      var(--color-heading, #1a1d2b);
  --ink-2:    var(--color-text, #2c3040);
  --ink-3:    var(--color-text-muted, #6b7189);
  --line:     var(--color-border, #d8dbe3);
  --line-2:   var(--color-surface-raised, #f0f1f4);
  --bg:       var(--color-surface, #ffffff);
  --bg-2:     var(--color-bg, #f8f9fb);
  --accent:   var(--color-accent, #2563eb);
  --gold:     var(--color-warning, #d97706);
  --gold-soft:var(--color-accent-subtle, rgba(217,119,6,.09));
  --red:      var(--color-danger, #dc2626);
  --ok:       var(--color-success, #16a34a);
  --radius:   var(--radius, 8px);
  --shadow:   var(--shadow-lg, 0 10px 30px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.06));
  /* the map canvas stays dark in both themes — pin colours need a dark ground to read */
  --sea-2:#0b1220;
  --land:#26344a;
  --land-line:#3d5070;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:15px/1.55 var(--font-body,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
  color:var(--color-text,#2c3040); background:var(--color-bg,#f8f9fb);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:650; letter-spacing:-.01em}
a{color:var(--accent,#2563eb); text-decoration:none}
a:hover{text-decoration:underline}
code{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ── shell ───────────────────────────────────────────── */
.cm{display:flex; flex-direction:column; height:calc(100vh - var(--header-height, 64px)); min-height:640px}

.cm-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:16px 20px 0; background:var(--bg); border-bottom:1px solid var(--line);
}
.cm-head-title h1{font-size:21px}
.cm-head-title p{margin:2px 0 12px; color:var(--ink-3); font-size:13px}

.cm-views{display:flex; gap:2px}
.cm-view{
  appearance:none; border:0; background:none; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--ink-3);
  padding:9px 14px; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.cm-view:hover{color:var(--ink)}
.cm-view.is-active{color:var(--ink); border-bottom-color:var(--accent)}

.cm-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 20px; background:var(--bg); border-bottom:1px solid var(--line);
}
.cm-search-wrap{position:relative; flex:1 1 340px; max-width:520px}
/* Form controls need an explicit colour. Everything else on the page inherits from
   body, but inputs and selects do not - they fall back to the user agent's black,
   which is invisible against the dark theme's dark field. */
.cm-search{
  width:100%; font:inherit; font-size:14px; padding:9px 12px; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2);
}
.cm-search:focus{outline:none; border-color:var(--accent); background:var(--bg)}
.cm-search::placeholder{color:var(--ink-3); opacity:1}

.cm-suggest{
  position:absolute; z-index:40; top:calc(100% + 5px); left:0; right:0;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); max-height:340px; overflow:auto;
}
.cm-sug{
  display:flex; align-items:center; gap:9px; padding:8px 12px; cursor:pointer;
  border-bottom:1px solid var(--line-2); font-size:13.5px;
}
.cm-sug:last-child{border-bottom:0}
.cm-sug:hover,.cm-sug.is-on{background:var(--color-accent-subtle,rgba(37,99,235,.07))}
.cm-sug-sub{color:var(--ink-3); font-size:12px; margin-left:auto; white-space:nowrap}
.cm-sug-none{padding:12px; color:var(--ink-3); font-size:13px}

.cm-toggles{display:flex; align-items:center; gap:14px; margin-left:auto}
.cm-check{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); cursor:pointer; user-select:none}
.cm-btn{
  appearance:none; font:inherit; font-size:13px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg); color:var(--ink-2);
  padding:7px 12px; border-radius:var(--radius);
}
.cm-btn:hover{border-color:var(--ink-3); color:var(--ink)}
.cm-btn-sq{width:32px; height:32px; padding:0; font-size:17px; line-height:1}

.cm-body{display:flex; flex:1; min-height:0}

/* ── legend / filters ────────────────────────────────── */
.cm-legend{
  width:236px; flex:none; overflow:auto; padding:16px 14px;
  background:var(--bg); border-right:1px solid var(--line);
}
.cm-legend h3{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); margin:0 0 9px}
.cm-legend>h3{margin-top:22px}   /* section breaks; the first heading sits in .cm-leg-head */

.cm-leg-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.cm-leg-head h3{margin-bottom:9px}
.cm-leg-all{display:flex; gap:4px; margin-bottom:9px}
.cm-leg-all button{
  appearance:none; font:inherit; font-size:11px; font-weight:600; cursor:pointer;
  color:var(--accent); background:none; border:0; padding:1px 4px; border-radius:4px;
}
.cm-leg-all button:hover:not(:disabled){background:var(--color-accent-subtle,rgba(37,99,235,.07))}
.cm-leg-all button:disabled{color:var(--ink-3); opacity:.45; cursor:default}

.cm-leg{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:7px 8px; border:0; border-radius:6px; background:none; cursor:pointer;
  font:inherit; font-size:12.5px; color:var(--ink-2); line-height:1.3;
}
.cm-leg:hover{background:var(--bg-2)}
.cm-leg.is-off{opacity:.35}
.cm-leg-dot{width:11px; height:11px; border-radius:50%; flex:none}
.cm-leg-n{margin-left:auto; color:var(--ink-3); font-size:11.5px; font-variant-numeric:tabular-nums}
.cm-leg-note{font-size:11.5px; color:var(--ink-3); line-height:1.45; margin:10px 2px 0}

/* ── map ─────────────────────────────────────────────── */
.cm-stage{flex:1; min-width:0; position:relative; display:flex}
.cm-panel-view{flex:1; min-width:0; overflow:auto}
.cm-panel-view[hidden]{display:none}

.cm-map-wrap{position:absolute; inset:0; background:var(--sea-2); overflow:hidden}
#cm-map{width:100%; height:100%; display:block; cursor:grab}
#cm-map.is-drag{cursor:grabbing}
#cm-ocean{fill:var(--sea-2)}

.cm-country{fill:var(--land); stroke:var(--land-line); stroke-width:.5; vector-effect:non-scaling-stroke}

.cm-edge{fill:none; stroke:#8fa6c9; stroke-opacity:.28; stroke-width:1.1; vector-effect:non-scaling-stroke}
.cm-edge.is-hot{stroke:#ffd977; stroke-opacity:.95; stroke-width:2; }
.cm-edges-off{display:none}

.cm-pin{cursor:pointer}
.cm-pin-hit{fill:transparent}
.cm-pin-dot{stroke:#0b1220; stroke-width:1.6}
.cm-pin.is-approx .cm-pin-dot{fill:none !important; stroke-width:2.4}
.cm-pin.is-nofiling .cm-pin-dot{stroke-dasharray:2.5 2}
.cm-pin.is-dim{opacity:.16}
.cm-pin.is-sel .cm-pin-ring{stroke:#ffd977; stroke-width:2; fill:none}
.cm-pin-label{
  fill:#dce6f5; font-size:9px; font-weight:600; paint-order:stroke;
  stroke:#0b1220; stroke-width:2.6; stroke-linejoin:round; pointer-events:none;
}
.cm-labels-off .cm-pin-label{display:none}

.cm-zoom-ctl{position:absolute; right:14px; bottom:44px; display:flex; flex-direction:column; gap:6px}
.cm-mapnote{
  position:absolute; left:14px; bottom:12px; color:#7d8ba3; font-size:11.5px;
  background:rgba(11,18,32,.72); padding:5px 9px; border-radius:5px; max-width:300px;
}
.cm-tip{
  position:absolute; z-index:20; pointer-events:none;
  background:var(--bg); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow);
  padding:7px 10px; font-size:12.5px; max-width:250px;
}
.cm-tip b{display:block; font-size:13px; margin-bottom:1px}
.cm-tip span{color:var(--ink-3)}

/* ── record body (shared by the entity and person dialogs) ── */

.cm-d-head{border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:16px}
.cm-d-head h2{font-size:18px; line-height:1.28}
.cm-d-sub{color:var(--ink-3); font-size:12.5px; margin-top:5px}
.cm-chips{display:flex; flex-wrap:wrap; gap:5px; margin-top:9px}
.cm-chip{
  font-size:11px; font-weight:600; letter-spacing:.02em; padding:3px 8px;
  border-radius:20px; background:var(--bg-2); color:var(--ink-2); border:1px solid var(--line);
}
.cm-chip-cat{color:#fff; border:0}
.cm-chip-warn{background:color-mix(in srgb,var(--red) 10%,transparent); color:var(--red); border-color:color-mix(in srgb,var(--red) 28%,transparent)}
.cm-chip-ok{background:color-mix(in srgb,var(--ok) 11%,transparent); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.cm-chip-mid{background:color-mix(in srgb,var(--gold) 12%,transparent); color:var(--gold); border-color:color-mix(in srgb,var(--gold) 32%,transparent)}

.cm-overview{
  font-size:14.5px; line-height:1.62; color:var(--ink-2);
  margin:0 0 16px; padding:0 0 16px; border-bottom:1px solid var(--line);
}
.cm-modal-box.is-wide .cm-overview{font-size:15px}

.cm-sec{margin-bottom:20px}
.cm-sec>h3{
  font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-3); margin-bottom:8px;
}
.cm-kv{display:grid; grid-template-columns:118px 1fr; gap:5px 12px; font-size:13px}
.cm-kv dt{color:var(--ink-3)}
.cm-kv dd{margin:0; color:var(--ink); overflow-wrap:anywhere}
.cm-kv dd ul{margin:0; padding-left:16px}

.cm-note{
  font-size:13px; line-height:1.55; color:var(--ink-2);
  background:var(--bg-2); border-left:3px solid var(--line); padding:10px 12px; border-radius:0 6px 6px 0;
}
.cm-note+.cm-note{margin-top:8px}
.cm-note b{display:block; color:var(--ink); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px}
.cm-note-gold{background:color-mix(in srgb,var(--gold) 8%,transparent); border-left-color:var(--gold)}
.cm-note-red{background:color-mix(in srgb,var(--red) 7%,transparent); border-left-color:var(--red)}

.cm-people{display:flex; flex-wrap:wrap; gap:6px}
.cm-person{
  appearance:none; font:inherit; font-size:12.5px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg); border-radius:20px;
  padding:5px 11px 5px 7px; display:inline-flex; align-items:center; gap:6px; color:var(--ink);
}
.cm-person:hover{border-color:var(--accent); background:var(--color-accent-subtle,rgba(37,99,235,.07))}
.cm-person-dot{width:8px; height:8px; border-radius:50%; flex:none}
.cm-person-role{color:var(--ink-3); font-size:11.5px}

.cm-link-row{
  display:block; width:100%; text-align:left; appearance:none; font:inherit;
  background:none; border:0; border-bottom:1px solid var(--line-2);
  padding:8px 0; cursor:pointer; font-size:13px; color:var(--ink);
}
.cm-link-row:hover{color:var(--accent)}
.cm-link-row small{display:block; color:var(--ink-3); font-size:12px; margin-top:2px; line-height:1.45}

.cm-docs a{display:block; padding:8px 0; border-bottom:1px solid var(--line-2); font-size:13px; line-height:1.4}
.cm-docs small{display:block; color:var(--ink-3); font-size:11.5px; margin-top:2px}

/* financial chart — plain HTML bars, so they scale to any dialog width */
.cm-bars{
  display:flex; align-items:stretch; gap:3px; height:140px; margin:2px 0 4px;
  position:relative;
}
.cm-bars:before{
  content:""; position:absolute; left:0; right:0; top:var(--zero);
  border-top:1px solid var(--line); pointer-events:none;
}
.cm-bar-col{flex:1 1 0; min-width:0; display:flex; flex-direction:column}
.cm-bar-track{flex:1; position:relative}
.cm-fbar{
  position:absolute; left:12%; right:12%; border-radius:2px 2px 0 0;
  background:var(--gold); min-height:1px;
}
.cm-fbar.neg{background:var(--red); border-radius:0 0 2px 2px}
.cm-bar-col:hover .cm-fbar{filter:brightness(1.15)}
.cm-bar-lbl{
  text-align:center; font-size:10px; color:var(--ink-3); padding-top:5px;
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden;
}
.cm-bars-cap{font-size:11.5px; color:var(--ink-3); margin:0 0 12px}
.cm-metric{
  appearance:none; font:inherit; font-size:12px; padding:4px 8px; border-radius:5px;
  color:var(--ink);
  border:1px solid var(--line); background:var(--bg); margin-bottom:9px;
}
.cm-table{width:100%; border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums}
.cm-table th,.cm-table td{padding:4px 6px; border-bottom:1px solid var(--line-2); text-align:right; white-space:nowrap}
.cm-table th{color:var(--ink-3); font-weight:600; text-align:right}
.cm-table th:first-child,.cm-table td:first-child{text-align:left}
.cm-scroll{overflow-x:auto}
.cm-neg{color:var(--red)}

/* ── list views ──────────────────────────────────────── */
.cm-list{padding:20px; max-width:1180px}
.cm-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:12px}
.cm-card{
  text-align:left; appearance:none; font:inherit; cursor:pointer;
  background:var(--bg); border:1px solid var(--line); border-left:3px solid var(--line);
  border-radius:var(--radius); padding:13px 14px; box-shadow:0 1px 2px rgba(20,29,43,.04);
}
.cm-card:hover{border-color:var(--ink-3); box-shadow:var(--shadow)}
.cm-card h4{font-size:14px; line-height:1.3; margin-bottom:4px}
.cm-card p{margin:0; font-size:12.5px; color:var(--ink-3); line-height:1.45}
.cm-card .cm-chips{margin-top:8px}
.cm-count{color:var(--ink-3); font-size:12.5px; margin-bottom:12px}

.cm-tools{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px;
  padding:12px 14px; margin-bottom:14px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
}
.cm-tool{display:flex; flex-direction:column; gap:4px}
.cm-tool>span{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-3); font-weight:600;
}
.cm-sel{
  font:inherit; font-size:13px; padding:6px 9px; color:var(--ink);
  border:1px solid var(--line); border-radius:6px; background:var(--bg-2);
}
.cm-sel:focus{outline:none; border-color:var(--accent)}
.cm-tools .cm-btn{align-self:flex-end}

.cm-tl{position:relative; padding-left:22px; max-width:760px}
.cm-tl:before{content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--line)}
.cm-tl-item{position:relative; padding:0 0 18px 0}
.cm-tl-item:before{content:""; position:absolute; left:-21px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--gold); border:2px solid #fff}
.cm-tl-year{font-weight:700; font-size:13px; color:var(--gold)}
.cm-tl-ev{font-size:13.5px; color:var(--ink-2); line-height:1.5}

/* ── dialogs ─────────────────────────────────────────── */
.cm-modal{position:fixed; inset:0; z-index:100}
.cm-modal[hidden]{display:none}
.cm-modal-backdrop{position:absolute; inset:0; background:rgba(20,29,43,.55)}
.cm-modal-boxes{position:absolute; inset:0}

.cm-modal-box{
  position:absolute; left:50%; top:50%;
  background:var(--bg); border-radius:12px; box-shadow:0 24px 60px rgba(20,29,43,.34);
  width:min(620px,calc(100vw - 40px)); max-height:86vh; overflow:auto; padding:26px;
  transition:transform .16s ease, opacity .16s ease;
}
/* entity records carry charts, tables and document lists, so they get more room */
.cm-modal-box.is-wide{width:min(880px,calc(100vw - 40px))}
.cm-modal-box.is-wide .cm-kv{grid-template-columns:168px 1fr}

/* dialogs underneath stay mounted - that is what preserves their scroll position */
.cm-modal-box.is-under{opacity:.55; pointer-events:none}

.cm-modal-x{
  position:absolute; top:12px; right:14px; appearance:none; border:0; background:none;
  font-size:26px; line-height:1; color:var(--ink-3); cursor:pointer; z-index:2;
}
.cm-modal-x:hover{color:var(--ink)}

.cm-back{
  appearance:none; font:inherit; font-size:12.5px; cursor:pointer; color:var(--ink-3);
  background:none; border:0; padding:0 0 12px; margin:-4px 0 0;
}
.cm-back:hover{color:var(--accent)}

@media (min-width:900px){
  .cm-modal-box.is-wide .cm-cols{
    display:grid; grid-template-columns:1fr 1fr; gap:0 26px; align-items:start;
  }
}

@media (max-width:1080px){
  .cm-legend{display:none}
}
@media (max-width:820px){
  .cm-body{flex-direction:column}
  .cm-stage{min-height:56vh}
}