/* Directory's own layout: the map, the pins, where the panels sit, the phone sheets, and print.
   Everything else (the bar, buttons, fields, chips, cards, avatars, focus, hover, fonts) comes from the shared kit, cando-ui.css.
   Colours are the kit's tokens (var(--cu-...)); the only literals are the map's own look, below. */

/* ---- the map's own look: the wash over the tiles and the pins ---- */
:root{--bar:76px;--dir-dur:.34s;
  --dir-tint:radial-gradient(60vw 60vh at 100% 0%,rgba(208,32,46,.12),transparent 62%),linear-gradient(160deg,rgba(244,244,246,.28),rgba(228,228,232,.28));
  --pin-stroke:#fff;--pin-black:#000;--pin-white:#fff;--pin-white-stroke:#000;--pin-grey:#58595B;--pin-deep:#7A1018;--pin-ring:#000;--label:rgba(255,255,255,.92);--label-ink:#111214;--label-edge:#fff;--map-line:rgba(34,36,42,.5);--map-name:rgba(34,36,42,.72)}
:root[data-theme=dark]{
  --dir-tint:radial-gradient(60vw 60vh at 100% 0%,rgba(208,32,46,.26),transparent 62%),linear-gradient(160deg,rgba(20,20,22,.35),rgba(5,5,6,.35));
  --pin-stroke:#000;--pin-grey:#9a9b9e;--pin-deep:#a3202b;--pin-ring:#fff;--label:rgba(20,20,22,.9);--label-ink:#f3f3f4;--label-edge:rgba(255,255,255,.16);--map-line:rgba(236,238,242,.22);--map-name:rgba(236,238,242,.5)}
body{margin:0;height:100%;overflow:hidden}
html{height:100%}
body.gated{overflow:auto}
h1,h2,h3,p,dl,dd{margin:0}
[hidden]{display:none!important}
svg{display:block}
.skip{position:absolute;left:-9999px;top:8px;z-index:30;padding:8px 14px;border-radius:999px;background:var(--cu-red);color:var(--cu-on-red)}
.skip:focus{left:12px}

/* ---- the stage: the map fills everything under the bar ---- */
.stage{position:fixed;left:0;right:0;top:var(--bar);bottom:0}
.map{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none;background:var(--cu-page)}
.map:focus-visible{outline-offset:-4px}
.map.dragging{cursor:grabbing}
.plane{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.relief{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}
.tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--dir-tint)}
#planePins{z-index:2;pointer-events:none}
.pin{position:absolute;width:0;height:0;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto}
.pinbody{position:absolute;left:0;top:0;display:block;transform:translate(-50%,-50%) scale(var(--inv,1)) translate(var(--dx,0),var(--dy,0));transform-origin:50% 50%;transition:filter .2s var(--cu-ease)}
.pin .g{width:20px;height:20px;transition:transform .35s var(--cu-spring)}
.pin:hover .g,.pin:focus-visible .g,.pin.hot .g{transform:scale(1.35)}
.pin:hover .pinbody,.pin:focus-visible .pinbody,.pin.hot .pinbody{filter:drop-shadow(0 0 6px var(--cu-red))}
.pin:focus-visible{outline:0}
.pin.dim{opacity:.22;transition:opacity .3s var(--cu-ease)}
.pin:not(.dim){transition:opacity .3s var(--cu-ease)}
.pin.sel{z-index:3}
.pin.sel .g{transform:scale(1.6);animation:dir-settle .5s var(--cu-spring)}
.pin.sel .pinbody{filter:drop-shadow(0 0 7px var(--cu-red))}
.pin.sel .pinbody::before{content:"";position:absolute;left:50%;top:10px;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2px solid var(--cu-red);animation:dir-pulse 1.8s var(--cu-ease) infinite}
@keyframes dir-pulse{from{transform:scale(1);opacity:.9}to{transform:scale(3.4);opacity:0}}
@keyframes dir-settle{from{transform:scale(2.3)}}
.pinlabel{position:absolute;left:50%;top:24px;transform:translateX(-50%);white-space:nowrap;padding:1px 8px 2px;border-radius:9px;font-size:11px;font-weight:500;line-height:1.4;
  background:var(--label);color:var(--label-ink);border:1px solid var(--label-edge);box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.12);opacity:0;pointer-events:none;transition:opacity .2s var(--cu-ease)}
.map.zoomed .pin:not(.dim) .pinlabel,.pin.sel .pinlabel{opacity:1}
.map .pin.hl:not(.sel) .pinlabel{opacity:0}      /* the hover label shows the site's name instead */
.pin:hover,.pin:focus-visible,.pin.hot{z-index:4}
.pin.ing{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--cu-ease),visibility 0s linear .2s}

/* state and province lines and names: one faint canvas between the tint and the pins */
.borders{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;pointer-events:none;user-select:none}

/* the hover label (the same look as the pin label) and the list of sites at a group that cannot be pulled apart */
.maplayer{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.hoverlabel{position:absolute;left:0;top:0;white-space:pre;padding:1px 8px 2px;border-radius:9px;font-size:11px;font-weight:500;line-height:1.4;max-width:260px;
  background:var(--label);color:var(--label-ink);border:1px solid var(--label-edge);box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.12);opacity:0;transition:opacity .15s var(--cu-ease);user-select:none}
.hoverlabel.on{opacity:1}
.cpick{position:absolute;left:0;top:0;pointer-events:auto;min-width:210px;max-width:min(320px,calc(100% - 12px));max-height:calc(100% - 12px);overflow:auto;padding:5px;border-radius:14px;
  background:var(--label);color:var(--label-ink);border:1px solid var(--label-edge);box-shadow:0 2px 4px rgba(0,0,0,.1),0 8px 24px rgba(0,0,0,.2);animation:dir-rise .22s var(--cu-ease)}
.cpick button{display:block;width:100%;text-align:left;border:0;background:none;color:inherit;font:inherit;font-size:13px;line-height:1.3;padding:7px 10px;border-radius:9px;cursor:pointer}
.cpick button b{display:block;font-weight:600}
.cpick button span{display:block;font-size:12px;opacity:.7}
.cpick button:hover{background:rgba(127,127,135,.16)}
.cpick button:focus-visible{outline:2px solid var(--cu-red);outline-offset:-2px}

/* a group of pins: a round count in the pins' own language of outline and shadow, in its division's colour when the sites share one */
.clusters{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.cluster{position:absolute;left:0;top:0;width:0;height:0;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto}
.cluster:hover,.cluster:focus-visible,.cluster.hot{z-index:2}
.cluster:focus-visible{outline:0}
.cbody{position:absolute;left:0;top:0;display:block;transform:translate(-50%,-50%);transition:filter .2s var(--cu-ease)}
.cbody::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%}
.cdisc{display:flex;align-items:center;justify-content:center;width:32px;height:32px;box-sizing:border-box;border-radius:50%;font:600 13px/1 var(--cu-font);letter-spacing:0;
  border:1.6px solid var(--pin-stroke);box-shadow:0 1px 3px rgba(0,0,0,.28),0 3px 10px rgba(0,0,0,.18);opacity:0;transform:scale(.55);transition:opacity .22s var(--cu-ease),transform .32s var(--cu-spring)}
.cluster.in .cdisc{opacity:1;transform:none}
.cluster:hover .cdisc,.cluster.hot .cdisc,.cluster:focus-visible .cdisc{transform:scale(1.12)}
.cluster:hover .cbody,.cluster.hot .cbody,.cluster:focus-visible .cbody{filter:drop-shadow(0 0 6px var(--cu-red))}
.c-nw .cdisc{background:var(--cu-red);color:#fff}
.c-nc .cdisc{background:var(--pin-deep);color:#fff}
.c-ne .cdisc{background:var(--pin-white);border-color:var(--pin-white-stroke);color:#111214}
.c-sw .cdisc{background:var(--pin-grey);color:var(--pin-stroke)}
.c-mw .cdisc{background:var(--pin-black);color:#fff}
.c-tl .cdisc{background:var(--pin-white);border:2.4px solid var(--cu-red);color:var(--cu-red)}
.c-tm .cdisc{background:var(--cu-red);border-color:var(--pin-white-stroke);color:#fff}
.c-mix .cdisc{background:var(--label);color:var(--label-ink);border:2px solid var(--label-ink)}
:root[data-theme=dark] .c-mw .cdisc,:root[data-theme=dark] .c-tm .cdisc{border-color:#fff}

/* division marks: a shape each, in the portal's black, red and white */
.g{flex:none;width:18px;height:18px;stroke-width:1.6;stroke-linejoin:round;stroke:var(--pin-stroke);paint-order:stroke}
.g-nw{fill:var(--cu-red)}
.g-nc{fill:var(--pin-deep)}
.g-ne{fill:var(--pin-white);stroke:var(--pin-white-stroke)}
.g-sw{fill:var(--pin-grey)}
.g-mw{fill:var(--pin-black)}
.g-tl{fill:var(--pin-white);stroke:var(--cu-red);stroke-width:2.4}
.g-tl .in{fill:var(--cu-red);stroke:none}
.g-tm{fill:var(--cu-red);stroke:var(--pin-white-stroke);stroke-width:1.4}
:root[data-theme=dark] .g-mw{stroke:#fff}
:root[data-theme=dark] .g-tm{stroke:#fff}

/* ---- motion (transform and opacity only; it runs whatever the system's "reduce motion" setting says, by the owner's decision) ---- */
@keyframes dir-rise{from{opacity:0;transform:translateY(12px)}}
@keyframes dir-menu{from{opacity:0;transform:translateY(-6px) scale(.97)}}
.panel.cu-card,.zoom{animation:dir-rise .42s var(--cu-ease)}
.row.rise{animation:dir-rise .34s var(--cu-ease) backwards;animation-delay:calc(var(--i,0) * 14ms)}
.cu-me .cu-menu:not([hidden]){animation:dir-menu .22s var(--cu-ease);transform-origin:100% 0}
.cu-nav .cu-nav__item{transition:background-color .25s var(--cu-ease),color .25s var(--cu-ease)}
.cu-chip.lg,.cu-seg .cu-seg__item{transition:background-color .25s var(--cu-ease),color .25s var(--cu-ease),box-shadow .25s var(--cu-ease)}

/* ---- left panel ---- */
.panel{position:absolute;left:16px;top:16px;bottom:16px;width:390px;z-index:5;display:flex;flex-direction:column;gap:10px;padding:16px 14px 0;--cu-card-blur:blur(24px) saturate(160%)}
.panel .cu-search{display:flex}
.panel .cu-search__input{width:100%;min-width:0}
.cu-seg.wide{display:flex}
.cu-seg.wide .cu-seg__item{flex:1;justify-content:center}
.legend{display:flex;flex-wrap:wrap;gap:6px}
.lg .g{width:14px;height:14px}
.resultbar{display:flex;align-items:center;gap:10px;min-height:26px;padding:0 4px;border-bottom:1px solid var(--cu-line);padding-bottom:8px}
.count{flex:1;font-size:13px;font-weight:600;color:var(--cu-muted)}
.sitechip{max-width:70%;padding-right:4px}
.sitechip>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.chipx{width:20px;height:20px;flex:none;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;padding:0;display:grid;place-items:center}
.list{flex:1;min-height:0;overflow-y:auto;margin:0 -6px;padding:2px 6px;scrollbar-width:thin;position:relative}
.rows{display:flex;flex-direction:column;gap:2px}
.vrows{display:block;position:relative}
.row{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border-radius:16px;border:1px solid transparent;text-align:left;background:none;min-width:0;font:inherit;color:inherit}
.vrows .row{position:absolute;left:0;right:0;height:66px;width:auto}
.row.site{cursor:pointer}
.list .row.person{cursor:pointer}
.row:is(.site,.person):hover{background:var(--cu-row-hover)}
.row.sel{background:var(--cu-row-selected);border-color:var(--cu-red)}
.row .txt{flex:1;min-width:0;display:flex;flex-direction:column}
.row .txt b{font-weight:600;font-size:14.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .txt span,.row .txt small{font-size:13px;color:var(--cu-muted);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .txt small{font-size:12px}
.row .n{font-size:12px;color:var(--cu-muted);white-space:nowrap}
.acts{display:flex;gap:4px;flex:none}
.act{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--cu-muted);border:1px solid transparent;transition:box-shadow .2s var(--cu-ease),border-color .2s var(--cu-ease),color .2s}
.act:hover{color:var(--cu-ink);border-color:var(--cu-red);box-shadow:var(--cu-hover-sm)}
.empty{padding:18px 10px;color:var(--cu-muted);font-size:14px}
.asof{font-size:11.5px;color:var(--cu-muted);padding:6px 4px 10px;border-top:1px solid var(--cu-line)}
.warn{color:var(--cu-red-text);font-weight:500}
.muted{color:var(--cu-muted);font-size:13.5px}

/* ---- one site ---- */
.detail{position:absolute;right:16px;top:16px;width:360px;max-height:calc(100% - 32px);z-index:6;overflow-y:auto;padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;--cu-card-blur:blur(24px) saturate(160%);will-change:transform,opacity}
.detail>*{flex:none}                                   /* the sheet scrolls; its parts keep their height instead of squeezing */
.detail.ghost{pointer-events:none;z-index:5;overflow:hidden}
.grab{display:none}
.dhead{display:flex;align-items:flex-start;gap:12px}
.dhead .g{width:26px;height:26px;margin-top:3px}
.dhead .txt{flex:1;min-width:0}
.dhead h2{font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.01em}
.dhead p{color:var(--cu-muted);font-size:13.5px;margin-top:2px}
.x{flex:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px;padding:10px 0;border-top:1px solid var(--cu-line);border-bottom:1px solid var(--cu-line)}
.facts dt{color:var(--cu-muted)}
.detail .cu-h2{margin-top:4px}
.detail .row.lead{--cu-card-blur:none;padding:10px 12px;cursor:default}
.mini{display:flex;flex-direction:column}
.mini .row{padding:5px 2px;cursor:default}
.more{align-self:flex-start}
.maplink{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:6px 12px 6px 8px;border-radius:999px;font-size:13px}
.maplink:hover{text-decoration:underline}

/* ---- zoom buttons ---- */
.zoom{position:absolute;right:16px;bottom:18px;z-index:4;display:flex;flex-direction:column;gap:6px;transition:transform var(--dir-dur) var(--cu-ease)}
.has-detail .zoom{transform:translateX(-376px)}
.zoom .cu-btn{background:var(--cu-card);border-color:var(--cu-card-edge);-webkit-backdrop-filter:var(--cu-card-blur);backdrop-filter:var(--cu-card-blur);box-shadow:var(--cu-lift)}

/* ---- not signed in ---- */
.gate{position:fixed;inset:var(--bar) 0 0 0;display:grid;place-items:center;padding:24px}
.gatecard{width:100%;max-width:480px;padding:34px 30px}
.gatecard .logo{height:72px;width:auto;margin:0 0 18px}
.gatecard .night,:root[data-theme=dark] .gatecard .day{display:none}
:root[data-theme=dark] .gatecard .night{display:block}
.gatecard p{color:var(--cu-muted);margin:16px 0 20px}

/* ---- small screens: the list becomes a sheet at the bottom, and the site slides up over it ---- */
@media (max-width:900px){
  .panel{left:8px;right:8px;top:auto;bottom:8px;width:auto;height:46%;padding:12px 10px 0;transition:opacity var(--dir-dur) var(--cu-ease)}
  .has-detail .panel{opacity:0;pointer-events:none}
  .detail{left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:52%;padding-top:6px}
  .grab{display:grid;place-items:center;height:18px;margin:0 -18px;touch-action:none;cursor:grab;flex:none}
  .grab i{width:38px;height:4px;border-radius:2px;background:var(--cu-hair)}
  .zoom{display:none}
  .legend{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
}

/* ---- printing the people list (the page prints through the hidden table, built just before the browser prints) ---- */
.printout{display:none}
@media print{
  @page{margin:14mm}
  :root{color-scheme:light}
  body{overflow:visible;height:auto;background:Canvas;color:CanvasText}
  .cu-root::before{display:none}
  #top,.stage,.gate,.skip{display:none!important}
  .printout{display:block;font-size:10pt}
  .phead{display:flex;align-items:center;gap:16px;margin-bottom:10pt;padding-bottom:8pt;border-bottom:2px solid var(--cu-red)}
  .phead img{height:54px}
  .phead h1{font-size:15pt;font-weight:600}
  .phead p{color:GrayText;font-size:9.5pt}
  .printout table{width:100%;border-collapse:collapse}
  .printout th{text-align:left;font-weight:600;font-size:9pt;color:GrayText;border-bottom:1px solid CanvasText;padding:4pt 6pt 4pt 0}
  .printout td{padding:3.5pt 6pt 3.5pt 0;border-bottom:1px solid GrayText;vertical-align:top}
  .printout tr{break-inside:avoid}
}