/* Unfinished Canada: the frame of the home page (north/home.css, frame.css) around the map; this file adds the page itself. */
:root{
  --red:#ff2d2d;--red-ink:#ff6a5e;--ink:#f3f5f8;--ink-2:#a7b0bb;--ink-3:#69737f;--rule:#2a1a1a;--hair:#1c2430;
  --late:#ff2d2d;--promised:#8fb6e8;--uc:#e4eeff;--no:#ff6a5e;--wanted:#c3ccd6;
  --font-ui:"IBM Plex Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-map:"IBM Plex Sans Condensed","Roboto Condensed","Arial Narrow",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --side-w:clamp(270px,24vw,370px);
}
[hidden]{display:none!important}

/* the page, as the home page */
body.map-page{margin:0;background:#000;color:var(--ink);overflow:hidden;height:100vh;height:100dvh;display:block;
  font:15px/1.45 var(--font-ui);-webkit-font-smoothing:antialiased}
body.map-page #map{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;cursor:grab;touch-action:none}
body.map-page #map.drag{cursor:grabbing}
body.map-page #map.hit{cursor:pointer}
body.map-page::before,body.map-page::after{content:"";position:fixed;top:0;bottom:0;width:min(34vw,520px);z-index:1;pointer-events:none}
body.map-page::before{left:0;background:linear-gradient(90deg,#000000e6 0%,#000000b3 45%,#00000000 100%)}
body.map-page::after{right:0;background:linear-gradient(270deg,#000000e6 0%,#000000b3 45%,#00000000 100%)}
:where(body.map-page) button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
body.map-page :focus-visible{outline:2px solid #ff8a80;outline-offset:2px}
body.map-page #tip{position:fixed}

/* the section of the site where this page stands */
.lines.left a[aria-current="page"]{border-left-color:var(--red);
  background:radial-gradient(220px 110px at 30% 50%,rgba(255,45,45,.20),rgba(255,45,45,.03) 72%)}
.lines.left a[aria-current="page"] .t{color:#fff;text-shadow:0 0 18px rgba(255,45,45,.75)}
.lines.left a[aria-current="page"]::after{transform:scaleX(1)}

/* the title of the map and its record, under the map as on the home page */
.layers .map-name{margin:0;font:600 12px/1.2 var(--font-map);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);text-shadow:0 0 10px #000}
.layers .headline b{font-size:1.2em;color:#fff}
.layers .headline b.r{color:var(--red)}
.layers{pointer-events:none}
.layers>*{pointer-events:auto}

/* the right column: the states of the projects, the built network, the filters, the card */
.side-col{position:fixed;z-index:2;right:clamp(18px,2.6vw,44px);top:clamp(84px,13vh,128px);bottom:clamp(20px,4vh,40px);width:var(--side-w);
  display:flex;flex-direction:column;text-align:right}
.find{margin:0 0 10px}
.find input{width:100%;padding:8px 0;background:transparent;border:0;border-bottom:1px solid var(--rule);color:var(--ink);text-align:right;
  font:500 15px/1.3 var(--font-map);letter-spacing:.04em;outline:0;-webkit-appearance:none;appearance:none;border-radius:0}
.find input::placeholder{color:var(--ink-3);letter-spacing:.2em;text-transform:uppercase;font-size:12px;opacity:1}
.find input:focus{border-bottom-color:var(--red)}
.find input::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
.side{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;padding:0 0 18px}

.states{margin:0;padding:0;list-style:none}
.states li:first-child .st{border-top:1px solid var(--rule)}
.st{position:relative;display:grid;grid-template-columns:1fr auto;gap:0 14px;align-items:baseline;width:100%;padding:clamp(9px,1.4vh,14px) 14px;
  text-align:right;border-bottom:1px solid var(--rule);border-right:2px solid transparent;
  transition:transform .28s cubic-bezier(.2,.85,.3,1),border-color .28s,background-color .28s,opacity .25s}
.st .t{grid-column:1;grid-row:1;font:600 clamp(16px,1.35vw,21px)/1.2 var(--font-map);color:#fff;letter-spacing:.02em}
.st .n{grid-column:2;grid-row:1/3;align-self:center;font:600 clamp(20px,1.8vw,28px)/1 var(--font-map);color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.st[data-s="late"] .n{color:var(--red)}
.st .m{grid-column:1;grid-row:2;font:500 13px/1.3 var(--font-map);color:var(--ink-2);letter-spacing:.04em;font-variant-numeric:tabular-nums;min-height:1.3em}
.st .gl{position:absolute;right:14px;bottom:-1px;width:56px;height:2px}
.st:hover{border-right-color:var(--red);transform:translateX(-6px);
  background:radial-gradient(220px 110px at var(--gx,70%) var(--gy,50%),rgba(255,45,45,.24),rgba(255,45,45,.05) 72%)}
.st[aria-pressed="false"]{opacity:.38}
.st[aria-pressed="false"] .t,.st[aria-pressed="false"] .n{text-decoration:line-through;text-decoration-thickness:2px}
.gl-late{background:var(--late);box-shadow:0 0 10px #ff2d2dcc}
.gl-promised{background:linear-gradient(90deg,var(--promised) 0 70%,var(--uc) 70%);box-shadow:0 0 10px #8fb6e899}
.gl-no{background:repeating-linear-gradient(90deg,var(--no) 0 5px,transparent 5px 9px)}
.gl-wanted{background:repeating-linear-gradient(90deg,var(--wanted) 0 1px,transparent 1px 3px)}

.grp{padding:18px 0 0}
.grp h2{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;margin:0 0 8px;padding:0 0 6px;border-bottom:1px solid var(--rule);
  font:600 11.5px/1.3 var(--font-map);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.grp h2 .all{order:-1;margin-right:auto;font:500 11px/1.3 var(--font-map);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.grp h2 .all:hover{color:var(--red-ink)}

.net{display:flex;flex-direction:column}
.lay{display:grid;grid-template-columns:1fr auto 34px;gap:0 12px;align-items:center;width:100%;padding:5px 0;text-align:right;transition:opacity .2s}
.lay .nm{font:500 14px/1.25 var(--font-map);letter-spacing:.03em;color:var(--ink)}
.lay .nm small{display:block;font:400 11.5px/1.3 var(--font-ui);letter-spacing:0;color:var(--ink-3)}
.lay .km{min-width:5.6em;font:500 13px/1.2 var(--font-map);color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.lay:hover .nm{color:#fff}
.lay[aria-pressed="false"]{opacity:.36}
.lay[aria-pressed="false"] .nm{text-decoration:line-through}
.lay svg{display:block;width:34px;height:14px;overflow:visible}

.words{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 14px}
.wd{padding:3px 0;font:500 13px/1.3 var(--font-map);letter-spacing:.04em;color:var(--ink);border-bottom:1px solid transparent}
.wd .c{margin-left:5px;font-weight:400;color:var(--ink-3);font-variant-numeric:tabular-nums}
.wd:hover{color:#fff;border-bottom-color:var(--red)}
.wd[aria-pressed="false"]{color:var(--ink-3);text-decoration:line-through;text-decoration-color:#3a4450}
.wd[aria-pressed="false"] .c{color:#434c57}
.provs .wd{min-width:3.2em;letter-spacing:.1em}

.sum{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0 0 10px}
.sum .k{font:500 11.5px/1.35 var(--font-map);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:left}
.sum .v{font:500 13.5px/1.3 var(--font-map);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.list{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:auto 1fr 3px;gap:1px 11px;width:100%;padding:8px 0;text-align:right;border-top:1px solid #10161e}
.row:first-child{border-top:0}
.row .mn{grid-column:1;grid-row:1;font:500 13.5px/1.28 var(--font-map);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:left}
.row .nm{grid-column:2;grid-row:1;font:500 14px/1.28 var(--font-map);color:var(--ink);letter-spacing:.01em;text-wrap:pretty}
.row .bar{grid-column:3;grid-row:1/3;align-self:stretch;margin:2px 0}
.row .mt{grid-column:1/3;grid-row:2;font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .mt i{font-style:normal}
.row:hover{background:radial-gradient(260px 60px at var(--gx,50%) var(--gy,50%),rgba(255,45,45,.14),transparent 75%)}
.row:hover .nm{color:#fff}
.bar.late{background:var(--late);box-shadow:0 0 8px #ff2d2d}
.bar.promised{background:var(--promised)}
.bar.uc{background:linear-gradient(180deg,var(--promised) 0 50%,var(--uc) 50%)}
.bar.no{background:repeating-linear-gradient(180deg,var(--no) 0 3px,transparent 3px 5px)}
.bar.wanted{background:transparent;box-shadow:inset 0 0 0 1px var(--wanted)}
.s-late{color:var(--red-ink)}.s-promised{color:var(--promised)}.s-no{color:var(--no)}.s-wanted{color:var(--wanted)}
.lh{display:flex;justify-content:space-between;margin:14px 0 2px;font:600 11px/1.3 var(--font-map);letter-spacing:.16em;text-transform:uppercase}
.lh:first-child{margin-top:4px}
.lh span{color:var(--ink-3);font-weight:500;font-variant-numeric:tabular-nums}
.empty{padding:6px 0;color:var(--ink-3);font-size:13px}

.src{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.src li{display:grid;grid-template-columns:1fr 22px;gap:4px;font:11.5px/1.5 var(--mono);color:var(--ink-3);overflow-wrap:anywhere;text-align:right}
.src li>.no{grid-column:2;grid-row:1;color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:right}
.src li>span:not(.no){grid-column:1;grid-row:1}
.src a{color:var(--ink-2);text-decoration:underline;text-decoration-color:#2f3b4b;text-underline-offset:2px;border:0}
.src a:hover{color:var(--ink);text-decoration-color:var(--red)}
.src .mk{color:var(--red-ink);margin-right:6px}

/* the card of a project or of a cell, in place of the filters */
.card{padding:4px 0 10px}
.card .back{font:500 11.5px/1.4 var(--font-map);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.card .back:hover{color:var(--red-ink)}
.card .state{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px 10px;margin:16px 0 6px;font:600 12px/1.3 var(--font-map);letter-spacing:.16em;text-transform:uppercase}
.card .state .bar{display:inline-block;width:22px;height:3px}
.card .state .sub{flex-basis:100%;color:var(--ink-3);font-weight:500;letter-spacing:.12em}
.card h2{margin:14px 0 0;font:600 clamp(19px,1.6vw,23px)/1.14 var(--font-map);letter-spacing:.03em;text-transform:uppercase;text-wrap:balance}
.card .state+h2{margin-top:0}
.card .place{margin:6px 0 0;color:var(--ink-2);font-size:13px}
.card .what{margin:12px 0 0;color:var(--ink);font-size:14px;line-height:1.5;text-align:justify;hyphens:auto}
.card .money{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:16px 0 0}
.card .pl{padding:8px 12px 7px;background:#050b14;border:1px solid #ffffff38;border-radius:3px;box-shadow:0 0 12px #ffffff12;text-align:right}
.card .pl.red{border-color:#ff2d2d99;box-shadow:0 0 14px #ff2d2d33}
.card .pl dt{font:500 10.5px/1.3 var(--font-map);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.card .pl dd{margin:3px 0 0;font:600 19px/1.1 var(--font-map);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.card h3{margin:20px 0 6px;padding-bottom:5px;border-bottom:1px solid var(--rule);font:600 11.5px/1.3 var(--font-map);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font-size:13px;text-align:left}
.kv dt{font:500 11.5px/1.5 var(--font-map);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.kv dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kv dd.r{color:var(--red-ink)}
.facts{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;text-align:justify;hyphens:auto}
.facts li{font-size:13.5px;color:var(--ink);padding-left:13px;position:relative;line-height:1.5}
.facts li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:1px;background:var(--red)}
.card p.txt{margin:0;font-size:13.5px;color:var(--ink);line-height:1.5;text-align:justify;hyphens:auto}
.card .list{margin-top:4px}

/* the note over the map under the pointer, as on the home page */
#tip{z-index:5;min-width:210px;max-width:300px;padding:10px 12px;border-radius:3px;pointer-events:none;
  background:#06080cf5;border:1px solid #18202a;box-shadow:0 8px 24px #000c;font:14px/1.45 var(--font-ui);color:var(--ink);text-align:left}
#tip .t-name{font:600 16px/1.2 var(--font-map)}
#tip .t-sub{font-size:12px;color:var(--ink-3);margin-top:1px}
#tip dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:8px 0 0;font-size:12.5px}
#tip dt{color:var(--ink-3)}
#tip dt.s-late{color:var(--red-ink)}#tip dt.s-promised{color:var(--promised)}#tip dt.s-no{color:var(--no)}#tip dt.s-wanted{color:var(--wanted)}
#tip dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}

@media (max-width:980px){
  /* the phone: the frame folds into rows under the name, as on the home page; the map, its record, then the column of the map */
  body.map-page{overflow:auto;height:auto;display:flex;flex-direction:column}
  body.map-page::before,body.map-page::after{display:none}
  body.map-page main{display:contents}
  body.map-page #map{order:3;position:relative;inset:auto;height:62vh;height:62dvh;margin-top:14px}
  .side-col{order:5;position:static;width:auto;margin:6px 16px 0;top:auto;bottom:auto;right:auto;display:block}
  .side{overflow:visible;padding-bottom:0}
  footer.foot{order:6}
  .st:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){.st,.lay{transition:none}}