/* The maps of the site: 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:#ffc640;--wanted:#c3ccd6;--green:#5cf0a0;
  --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(240px,23vw,360px);
}
[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,#000000f0 0%,#000000d9 48%,#00000080 76%,#00000000 100%)}
body.map-page::after{right:0;background:linear-gradient(270deg,#000000f0 0%,#000000d9 48%,#00000080 76%,#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)}
/* the record of a map as figures: each number over its words, one line over the row and one under it */
.layers .figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;width:100%;min-height:0;margin:0;padding:0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);text-wrap:initial}
.layers .figs .fig{display:block;padding:8px 7px 7px;border-left:1px solid var(--rule)}
.layers .figs .fig:first-child{border-left:0}
.layers .figs .fig b{display:block;font:600 clamp(23px,2.1vw,28px)/1 var(--font-map);letter-spacing:.01em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.layers .figs .fig b.r{color:var(--red);text-shadow:0 0 20px rgba(255,45,45,.6),0 0 5px #000}
/* green: what stands north of 60 */
.layers .figs .fig b.g{color:var(--green);text-shadow:0 0 20px rgba(92,240,160,.5),0 0 5px #000}
.layers .key .k.north::before{background:var(--green);box-shadow:0 0 8px rgba(92,240,160,.75)}
.ln[data-mode="north"] .n{color:var(--green)}
.layers .figs .fig span{display:block;min-height:2.8em;margin-top:6px;font:500 10px/1.4 var(--font-map);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);text-wrap:balance}
/* the key: a mark of each colour before its word */
.layers .key .k{display:inline-block;margin:0 9px;white-space:nowrap}
.layers .key .k::before{content:"";display:inline-block;box-sizing:border-box;width:7px;height:7px;margin:0 7px 1px 0;border-radius:50%;vertical-align:middle}
.layers .key .k.late::before{background:var(--late);box-shadow:0 0 8px var(--late)}
.layers .key .k.promised::before{background:#7fb0ff;box-shadow:0 0 7px rgba(104,160,255,.8)}
.layers .key .k.wanted::before{background:#f4f7fb;box-shadow:0 0 7px rgba(236,241,250,.6)}
.layers .key .k.amber::before{background:#ffc061;box-shadow:0 0 7px rgba(255,176,64,.7)}
.layers .key .k.no::before{width:9px;height:9px;border:1.8px solid var(--no);box-shadow:0 0 7px rgba(255,198,64,.5)}
@media (max-width:560px){
  .layers .figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layers .figs .fig:nth-child(odd){border-left:0}
  .layers .figs .fig:nth-child(n+3){border-top:1px solid var(--rule)}
  .layers .key .k{margin:0 7px}
}
/* between 981 and 1180 px the words under a number take three lines: every map keeps one height of its record */
@media (min-width:981px) and (max-width:1180px){.layers .figs .fig span{min-height:4.2em}}
/* the record of every map begins at one height, so that the country stands at one place on every map */
body.map-page .layers{bottom:auto;top:calc(100vh - 154px);top:calc(100dvh - 154px);gap:6px}
body.map-page .layers .key{white-space:nowrap}
.layers{pointer-events:none}
.layers>*{pointer-events:auto}

/* the right column: the right rail of the site. The lines of the home page (north/home.css .lines.right a), a line that opens
   (frame.css .fold-mark), the smaller lines under it (frame.css .rail li ol a). Nothing else. */
.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}
/* one line under the word: the line of the search is the top line of the first row */
.find{margin:0}
/* the word on the axis of the line; the red line and the typing of the word are those of the search of the frame (frame.css, .sq) */
.find input{width:100%;height:38px;box-sizing:border-box;padding:9px 12px 8px;background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0;
  color:#fff;outline:0;text-align:center;text-indent:.06em;caret-color:var(--red);font:500 15px/1.3 var(--font-map);letter-spacing:.06em;-webkit-appearance:none;appearance:none}
.find input::placeholder{color:var(--ink-3);letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;font-size:12px;opacity:1}
.find input:focus::placeholder{color:transparent}
body.map-page .find input:focus-visible{outline:0}
.find input::-webkit-search-cancel-button,.find input::-webkit-search-decoration{display:none;-webkit-appearance:none}
/* the list scrolls when it is long; the light of a line under the pointer is not cut at the edge of the column */
.side{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;margin:0 -40px;padding:0 40px 18px;pointer-events:none}
.side::-webkit-scrollbar{display:none}
.side>*{pointer-events:auto}
.side ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.side li{margin:0;padding:0}

/* the names begin under the first letter of the word of the search and every number begins on one line: --nx, where the
   word begins, is set by atlas.js */
.side-col{--nx:40px}
.ln,.sb{position:relative;display:grid;align-items:baseline;width:100%;box-sizing:border-box;text-align:left;color:inherit;text-decoration:none;
  border:0;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,box-shadow .28s,opacity .25s}
.ln{grid-template-columns:minmax(0,1fr) minmax(3.7em,auto);gap:0 8px;padding:clamp(11px,1.7vh,17px) 8px clamp(11px,1.7vh,17px) var(--nx)}
/* the red line under the line under the pointer: it runs out from the right and folds back when the pointer leaves */
.ln::after,.sb::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:right;
  transition:transform .42s cubic-bezier(.2,.85,.3,1)}
.ln:hover,.ln:focus-visible,a.sb:hover,button.sb:hover,a.sb:focus-visible,button.sb:focus-visible{outline:0;border-right-color:var(--red);transform:translateX(-6px);
  background:radial-gradient(220px 110px at var(--gx,50%) var(--gy,50%),rgba(255,45,45,.30),rgba(255,45,45,.06) 72%);
  box-shadow:0 0 34px rgba(255,45,45,.16)}
.ln:hover::after,.ln:focus-visible::after,a.sb:hover::after,button.sb:hover::after,a.sb:focus-visible::after,button.sb:focus-visible::after{transform:scaleX(1)}
.ln .t{grid-column:1;grid-row:1;font:600 clamp(14.2px,1.45vw,23px)/1.2 var(--font-map);color:#fff;letter-spacing:.02em;text-wrap:balance}
.ln .n{grid-column:2;grid-row:1;font:600 clamp(10.5px,1.05vw,17px)/1 var(--font-map);color:var(--red);letter-spacing:.06em;font-variant-numeric:tabular-nums;
  text-align:left;white-space:nowrap}
.ln .s,.sb .s{grid-column:1;max-height:0;opacity:0;overflow:hidden;font:400 clamp(12.5px,.9vw,14px)/1.4 var(--font-ui);color:var(--ink-2);text-wrap:pretty;
  transition:max-height .35s ease,opacity .35s ease,margin .35s ease}
.ln .s i,.sb .s i{font-style:normal}
.ln:hover .t,.ln:focus-visible .t{color:#fff;text-shadow:0 0 18px rgba(255,45,45,.75)}
.ln:hover .n,.ln:focus-visible .n{color:#fff}
.ln:hover .s:not(:empty),.ln:focus-visible .s:not(:empty),.sb:hover .s:not(:empty),.sb:focus-visible .s:not(:empty){max-height:4.5em;opacity:1;margin-top:3px}
/* a state put out, the mode not chosen */
.ln[aria-pressed="false"],.ln[role="radio"][aria-checked="false"],.sb[aria-pressed="false"]{opacity:.34}
.ln[role="radio"][aria-checked="true"]{border-right-color:var(--red)}

/* a line that opens: the mark of the rail, the smaller lines under it */
.fh{padding-left:var(--nx)}
.fold-mark{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px}
.fold-mark::before{content:"";position:absolute;left:5px;top:3px;width:7px;height:7px;border:solid var(--ink-3);border-width:0 1.5px 1.5px 0;
  transform:translateY(4px) rotate(-135deg);transition:transform .28s cubic-bezier(.2,.85,.3,1),border-color .28s}
.fold.shut>.fh .fold-mark::before{transform:rotate(45deg)}
.fh:hover .fold-mark::before{border-color:var(--red)}
/* the line that is open keeps its red line and its light; shut again, the red line folds back */
.fold:not(.shut)>.fh{border-right-color:var(--red)}
.fold:not(.shut)>.fh::after{transform:scaleX(1)}
.fold:not(.shut)>.fh .t{text-shadow:0 0 18px rgba(255,45,45,.75)}
.fold.shut>.subs{display:none}
.fold>.subs{animation:side-open .32s cubic-bezier(.2,.85,.3,1)}
@keyframes side-open{from{opacity:0;transform:translateY(-6px)}}
/* a smaller line: its name begins under the same letter and has the width of the column to itself; its sum stands under it.
   The short lines of the filters keep their number beside the name, on the line of the numbers */
.sb{grid-template-columns:minmax(0,1fr);gap:0 8px;padding:8px 8px 8px var(--nx);border-bottom-color:var(--hair)}
.subs>li:last-child>.sb{border-bottom-color:var(--rule)}
.sb .t{grid-column:1;grid-row:1;font:500 clamp(13.5px,1vw,15.5px)/1.25 var(--font-map);color:var(--ink-2);letter-spacing:.01em;text-wrap:balance}
.sb .n{grid-column:1;grid-row:2;margin-top:4px;font:600 11.5px/1 var(--font-map);color:var(--ink-3);letter-spacing:.1em;font-variant-numeric:tabular-nums;text-align:left;white-space:nowrap}
.sb .s{font-size:12px;grid-row:3}
#sectors .sb,#provs .sb,#cats .sb,#layers .sb{grid-template-columns:minmax(0,1fr) minmax(3.7em,auto)}
#sectors .sb .n,#provs .sb .n,#cats .sb .n,#layers .sb .n{grid-column:2;grid-row:1;margin-top:0}
a.sb:hover .t,button.sb:hover .t,a.sb:focus-visible .t,button.sb:focus-visible .t{color:#fff}
a.sb:hover .n,button.sb:hover .n,a.sb:focus-visible .n,button.sb:focus-visible .n{color:var(--red)}
#list .n,#found .n,.card .subs .n{min-width:52px}
#layers .n{min-width:74px}
#sectors .n,#provs .n,#cats .n{min-width:30px}
#sources .n{min-width:22px}

/* one layer: the band along the border or the land north of 60 */
/* the distance: the first line of the column, as high as every other line of it, so that the lines of the column keep their step */
.dist{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-content:center;align-items:baseline;box-sizing:border-box;
  height:calc(2*clamp(11px,1.7vh,17px) + 1.2*clamp(17px,1.45vw,23px) + 1px);padding:0 8px 0 14px;border-bottom:1px solid var(--rule);cursor:pointer}
.dist .k{font:500 10.5px/1.2 var(--font-map);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);text-align:left;white-space:nowrap}
.dist .v{font:600 12px/1.2 var(--font-map);letter-spacing:.06em;color:var(--red);font-variant-numeric:tabular-nums;white-space:nowrap}
.dist input{grid-column:1/-1;width:100%;height:12px;margin:0;accent-color:var(--red);cursor:pointer}

.empty{padding:12px 14px 12px var(--nx);text-align:left;color:var(--ink-3);font-size:13px}
.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:#fff}
.s-late{color:var(--red-ink)}.s-promised{color:var(--promised)}.s-no{color:var(--no)}.s-wanted{color:#fff}

.src{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.src li{display:grid;grid-template-columns:1fr 22px;gap:4px;padding:8px 14px 8px var(--nx);border-bottom:1px solid var(--hair);font:500 13px/1.4 var(--font-map);color:var(--ink-3);overflow-wrap:anywhere;text-align:left}
.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:none;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:0 0 10px}
.card .state{display:flex;flex-wrap:wrap;justify-content:center;text-align:center;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:none}
.card .state .sub{flex-basis:100%;color:var(--ink-3);font-weight:500;letter-spacing:.12em}
.card h2{text-align:center;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{text-align:center;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}
/* the card is the column: every fact a line, the word on the left of its value, no plate and no frame. One line down the
   whole column: a word ends and its value begins where the names of the column begin, under the first letter of the word
   of the search (--nx); what stands alone (the state, the name, a heading) stands on the axis of that word */
.card{--kw:var(--nx)}
.card .money{display:block;margin:16px 0 0;border-top:1px solid var(--rule)}
.card .pl,.kv{display:grid;grid-template-columns:var(--kw) minmax(0,1fr);gap:0;text-align:right}
.card .pl{align-items:baseline;border-bottom:1px solid var(--hair)}
.card .pl dt,.kv dt{text-align:right;padding:10px 12px 10px 0;font:500 11px/1.35 var(--font-map);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-wrap:balance}
.card .pl dd,.kv dd{text-align:left;margin:0;padding:10px 8px 10px 0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.card .pl dd{font:600 clamp(16px,1.3vw,19px)/1.15 var(--font-map);letter-spacing:.02em;color:#fff}
.card .pl.red dd{color:var(--red)}
.card .pl.no dd{color:var(--no)}
.card h3{text-align:center;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)}
/* a word and its value fill their line whole, so that the line under them is one line whichever of the two is the taller */
.kv{margin:0;font-size:13.5px}
.kv dt,.kv dd{padding-top:8px;padding-bottom:8px;border-bottom:1px solid var(--hair)}
.kv dt{line-height:1.72}
.kv dd{color:var(--ink);line-height:1.4}
.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 .subs{margin-top:18px;border-top:1px solid var(--rule)}
.card h2,.card .place,.card .what,.card .facts,.card p.txt,.card .state{margin-left:14px;margin-right:14px}
.card h3{padding-left:14px;padding-right:14px}

/* 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}
#tip .t-note{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-2)}

@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;width:100%;height:56vh;height:56dvh;margin-top:6px}
  .side-col{order:5;position:static;width:auto;margin:6px 16px 0;top:auto;bottom:auto;right:auto;display:block}
  .side{overflow:visible;margin:0;padding:0}
  footer.foot{order:6}
  .ln:hover,.ln:focus-visible,a.sb:hover,button.sb:hover{transform:none}
  /* the key of a map breaks into lines on a narrow screen */
  body.map-page .layers .key{white-space:normal}
}
@media (prefers-reduced-motion:reduce){.ln,.sb,.ln::after,.sb::after,.ln .s,.sb .s,.fold-mark::before,.fold>.subs{transition:none;animation:none}}
/* the sources of a card take the width of the column */
.card .src li{padding-left:14px;text-align:left}
/* A line under the pointer keeps its height: its name rises and its note stands under the name inside the line, so that no
   line under it moves and the lines of the column stay where the record of the map meets them. */
.ln .t,.ln .n{transition:transform .28s cubic-bezier(.2,.85,.3,1),color .28s,text-shadow .28s}
.ln .s{grid-column:auto;grid-row:auto;position:absolute;left:var(--nx);right:8px;bottom:calc(clamp(11px,1.7vh,17px) - 9px);margin:0;max-height:none;font-size:clamp(12px,.85vw,13px);line-height:1.25;
  white-space:nowrap;overflow:hidden;opacity:0;transition:opacity .3s ease;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent)}
.ln:hover .s:not(:empty),.ln:focus-visible .s:not(:empty){max-height:none;margin:0;opacity:1}
.ln:has(.s:not(:empty)):hover .t,.ln:has(.s:not(:empty)):hover .n,.ln:has(.s:not(:empty)):focus-visible .t,.ln:has(.s:not(:empty)):focus-visible .n{transform:translateY(-7px)}
/* A smaller line under the pointer keeps its height too. Its note stands beside its sum, on the line of the sum, and only
   comes to light there; the note of a layer of the built network stands under its name always. */
.sb{grid-template-columns:auto minmax(0,1fr)}
.sb .t{grid-column:1/-1}
.sb .s{grid-column:2;grid-row:2;margin:4px 0 0;max-height:none;font-size:12px;line-height:1.1;white-space:nowrap;overflow:hidden;opacity:0;transition:opacity .3s ease;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent)}
.sb:hover .s:not(:empty),.sb:focus-visible .s:not(:empty){max-height:none;margin:4px 0 0;opacity:1}
#sectors .sb .t,#provs .sb .t,#cats .sb .t,#layers .sb .t{grid-column:1}
#layers .sb .s{grid-column:1/-1;grid-row:2;margin:3px 0 0;opacity:1;white-space:normal;-webkit-mask-image:none;mask-image:none;color:var(--ink-3)}