/* Metal Craft Engineering: the works map, "Where we have worked" (round B3, agent B3; B15; rebuilt by B19, 26 Oct 2026,
   for the owner's 15:35 "look at the map section of Rahee, it is so clean"). The markup is made by tools/map_section.py;
   map.js drives it. The map is flat: assets/map/india-plain.svg (every state light grey, thin white borders) under an
   inline SVG layer in the same 576 x 640 units with the states that have works (a light red tint) and one small ink truss
   per point. One card per state sits beside the map (four a side at 1024 px and up), each joined to its state by a thin
   orthogonal line that map.js draws; under 1024 px the cards are a two-column grid under the map, without lines. A
   state's works open in one panel under the map; every work is behind one disclosure. No style attributes anywhere; no
   pills, no glows, no shadows. */

.pmap-sec>.wrap{container-type:inline-size}
.pmap{--tint:#e5c2c5;--tint-2:#d99aa1;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3.4vw,48px);max-width:1344px;margin-inline:auto}
@supports (color:color-mix(in srgb,red 50%,blue)){.pmap{--tint:color-mix(in srgb,var(--accent) 22%,var(--bg));--tint-2:color-mix(in srgb,var(--accent) 42%,var(--bg))}}

/* The heading row: the H2, and the switch at its right (under it on narrow screens). */
.pmap-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px}
.pmap-head h2{max-width:16ch}
.pmap-head .eyebrow+h2{margin-top:18px}

/* The switch: two outlined plates, the pressed one filled in ink, like the projects page filters (style.css). It shows
   only once map.js runs (.is-ready); without it, both statuses are on the map and in the list. */
.pmap-switch{display:flex;flex-wrap:wrap;gap:8px}
.pmap:not(.is-ready) .pmap-switch{display:none}
:is(.pmap-switch button,.pmap-zoom){--cut:var(--cut-sm,6px);--edge:var(--line-3,var(--line-2));--fill:transparent;--ew:1px;
  display:inline-flex;align-items:center;gap:.45em;height:2.75rem;padding:0 1.125rem;border:0;border-radius:0;
  font:inherit;font-size:.9rem;color:var(--txt-2);cursor:pointer;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  background:linear-gradient(var(--edge),var(--edge)) top/100% var(--ew) no-repeat,linear-gradient(var(--edge),var(--edge)) bottom/100% var(--ew) no-repeat,
    linear-gradient(var(--edge),var(--edge)) left/var(--ew) 100% no-repeat,linear-gradient(var(--edge),var(--edge)) right/var(--ew) 100% no-repeat,
    linear-gradient(to bottom right,transparent 50%,var(--edge) 0 calc(50% + var(--ew)),transparent 0) top left/var(--cut) var(--cut) no-repeat,
    linear-gradient(to bottom right,transparent calc(50% - var(--ew)),var(--edge) 0 50%,transparent 0) bottom right/var(--cut) var(--cut) no-repeat,var(--fill);
  transition:--edge .25s,--fill .25s,color .25s}
:is(.pmap-switch button,.pmap-zoom):hover{color:var(--txt);--edge:var(--warm)}
:is(.pmap-switch button[aria-pressed="true"],.pmap-zoom:has(input:checked)){--fill:var(--txt);--edge:var(--txt);color:var(--bg)}
/* slop-ok: outline-none replaced by designed :focus-visible (the plate's own edge, 2 px, as style.css does for buttons) */
.pmap-switch button:focus-visible{outline:none;--edge:var(--txt);--ew:2px}
.pmap-switch button[aria-pressed="true"]:focus-visible{--edge:var(--accent)}
.pmap-zoom{justify-self:start;user-select:none}
.pmap-zoom:has(input:focus-visible){--edge:var(--txt);--ew:2px}
.pmap-zoom:has(input:checked:focus-visible){--edge:var(--accent)}
.pmap-n{font-family:var(--mono);font-size:.82em;font-variant-numeric:tabular-nums;letter-spacing:.02em}



/* The stage. Phones and tablets (under 1024 px): the map full width, then the cards two to a row, no lines. From 1024 px:
   cards | map | cards, the map centred and 560-640 px tall where the screen allows, the lines over everything but
   never over a card (map.js routes them through the gutters). */
.pmap-stage{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pmap-col{display:contents}
.pmap-frame{position:relative;grid-column:1/-1;order:-1;width:min(100%,36rem);margin:0 auto 16px}
.pmap-wires{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none}
.pmap-stage:not([data-wires]) .pmap-wires{display:none}
@media (min-width:1024px){
  .pmap-stage{grid-template-columns:192px minmax(0,1fr) 192px;align-items:center;gap:0}
  .pmap-col{position:relative;z-index:2;display:grid;grid-auto-rows:1fr;gap:16px;align-content:center}
  .pmap-frame{grid-column:auto;order:0;width:min(calc(100% - 96px),576px,max(504px,calc((100svh - var(--hdr,72px) - 112px) * .9)));margin:0 auto}
}
@media (min-width:1280px){.pmap-stage{grid-template-columns:212px minmax(0,1fr) 212px}}

/* The map: the flat picture, and the layer over it in the same units. */
.pmap-land{display:block;width:100%;height:auto}
.pmap-svg{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible}
.pmap-st{fill:var(--tint);stroke:#fff;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .2s}
.pmap-st.is-on{fill:var(--tint-2)}
.pmap[data-show="completed"] .pmap-st:not([data-c]),.pmap[data-show="ongoing"] .pmap-st:not([data-o]){fill:none;stroke:none;pointer-events:none}

/* The glyphs: a small ink truss per point (about 12 x 8 px), red when hovered, focused or its state is lit. */
.pmap-pin{color:var(--txt);cursor:pointer}
.pmap-g{fill:none;stroke:currentColor;stroke-width:1.35;stroke-linejoin:round;stroke-linecap:round;transform-box:fill-box;transform-origin:center;transition:color .2s}
.pmap-hit{fill:transparent;stroke:none}
.pmap-pin:is(:hover,.is-on){color:var(--accent)}
/* slop-ok: outline-none replaced by designed :focus-visible (a 1 px ink square round the glyph, drawn on .pmap-hit) */
.pmap-pin:focus{outline:none}
.pmap-pin:focus-visible{color:var(--accent)}
.pmap-pin:focus-visible .pmap-hit{stroke:var(--txt);stroke-width:1.5;vector-effect:non-scaling-stroke}
@media (max-width:1023px){.pmap-g{transform:scale(1.3)}}

/* The lines: 1 px ink at 40%, red when their card is lit (map.js writes the paths). */
.pmap-wire{fill:none;stroke:var(--txt);stroke-opacity:.4;stroke-width:1;shape-rendering:crispEdges}
.pmap-wire.is-on{stroke:var(--accent);stroke-opacity:1}

/* One status at a time once map.js has set data-show (it also sets display="none" on the glyphs, hidden on the cards). */
.pmap[data-show="completed"] :is(.pmap-pin,.pmap-group,.pmap-card)[data-status="ongoing"],
.pmap[data-show="ongoing"] :is(.pmap-pin,.pmap-group,.pmap-card)[data-status="completed"]{display:none}

/* The cards: cut-corner plates with a 1 px edge; the state, the count, the two shortest titles. */
.pmap-card{--cut:var(--cut-md,8px);--edge:var(--line-2);--fill:var(--surface);--ew:1px;display:grid;align-content:start;gap:4px;width:100%;margin:0;padding:14px 16px 16px;
  border:0;border-radius:0;font:inherit;text-align:left;color:var(--txt);cursor:pointer;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  background:linear-gradient(var(--edge),var(--edge)) top/100% var(--ew) no-repeat,linear-gradient(var(--edge),var(--edge)) bottom/100% var(--ew) no-repeat,
    linear-gradient(var(--edge),var(--edge)) left/var(--ew) 100% no-repeat,linear-gradient(var(--edge),var(--edge)) right/var(--ew) 100% no-repeat,
    linear-gradient(to bottom right,transparent 50%,var(--edge) 0 calc(50% + var(--ew)),transparent 0) top left/var(--cut) var(--cut) no-repeat,
    linear-gradient(to bottom right,transparent calc(50% - var(--ew)),var(--edge) 0 50%,transparent 0) bottom right/var(--cut) var(--cut) no-repeat,var(--fill);
  transition:--edge .2s}
.pmap-card[hidden]{display:none}
.pmap-card:is(:hover,.is-on){--edge:var(--accent)}
.pmap-card[aria-expanded="true"]{--edge:var(--accent);--ew:2px}
/* slop-ok: outline-none replaced by designed :focus-visible (the plate's own edge, 2 px, as style.css does for buttons) */
.pmap-card:focus-visible{outline:none;--edge:var(--txt);--ew:2px}
.pmap-card-s{font-size:1rem;font-weight:500;line-height:1.3;letter-spacing:-.01em}
.pmap-card-n{margin-bottom:6px;font:500 .72rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-txt,var(--txt-2))}
.pmap-card-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:.82rem;line-height:1.4;color:var(--txt-2)}
.pmap-card-t+.pmap-card-t{margin-top:4px}

/* The panel under the map: one state's works, spaced rows, a close button. */
.pmap-panel{--cut:var(--cut-lg,12px);--edge:var(--line-2);--fill:var(--surface);--ew:1px;padding:clamp(20px,2.4vw,32px) clamp(20px,2.6vw,36px);scroll-margin:calc(var(--hdr,72px) + 24px) 0 24px;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  background:linear-gradient(var(--edge),var(--edge)) top/100% var(--ew) no-repeat,linear-gradient(var(--edge),var(--edge)) bottom/100% var(--ew) no-repeat,
    linear-gradient(var(--edge),var(--edge)) left/var(--ew) 100% no-repeat,linear-gradient(var(--edge),var(--edge)) right/var(--ew) 100% no-repeat,
    linear-gradient(to bottom right,transparent 50%,var(--edge) 0 calc(50% + var(--ew)),transparent 0) top left/var(--cut) var(--cut) no-repeat,
    linear-gradient(to bottom right,transparent calc(50% - var(--ew)),var(--edge) 0 50%,transparent 0) bottom right/var(--cut) var(--cut) no-repeat,var(--fill)}
.pmap-panel[hidden],.pmap-pl[hidden]{display:none}
.pmap-pl:focus{outline:none}
.pmap-pl-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.pmap-pl-s{font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:500;letter-spacing:-.02em}
.pmap-pl-n{font:500 .75rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2)}
.pmap-x{--cut:var(--cut-sm,6px);--edge:var(--line-3,var(--line-2));--fill:transparent;--ew:1px;margin-left:auto;height:2.75rem;padding:0 1.125rem;border:0;border-radius:0;
  font:inherit;font-size:.9rem;color:var(--txt);cursor:pointer;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  background:linear-gradient(var(--edge),var(--edge)) top/100% var(--ew) no-repeat,linear-gradient(var(--edge),var(--edge)) bottom/100% var(--ew) no-repeat,
    linear-gradient(var(--edge),var(--edge)) left/var(--ew) 100% no-repeat,linear-gradient(var(--edge),var(--edge)) right/var(--ew) 100% no-repeat,
    linear-gradient(to bottom right,transparent 50%,var(--edge) 0 calc(50% + var(--ew)),transparent 0) top left/var(--cut) var(--cut) no-repeat,
    linear-gradient(to bottom right,transparent calc(50% - var(--ew)),var(--edge) 0 50%,transparent 0) bottom right/var(--cut) var(--cut) no-repeat,var(--fill)}
.pmap-x:hover{--edge:var(--warm)}
/* slop-ok: outline-none replaced by designed :focus-visible (the plate's own edge, 2 px) */
.pmap-x:focus-visible{outline:none;--edge:var(--txt);--ew:2px}
.pmap-pl-rows{margin:0;padding:0;list-style:none}
.pmap-pl-row{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid var(--line)}
.pmap-pl-row:last-child{border-bottom:0;padding-bottom:4px}

/* The disclosure: every work of the status shown, by state, as spaced rows (the register's own strings). */
.pmap-all{border-top:1px solid var(--line)}
.pmap-all-s{display:flex;align-items:center;gap:12px;min-height:44px;padding:20px 0 0;font-size:1.05rem;font-weight:500;color:var(--txt);cursor:pointer;list-style:none}
.pmap-all-s::-webkit-details-marker{display:none}
.pmap-all-s::after{content:"";flex:none;width:9px;height:9px;border-right:1.5px solid var(--txt-2);border-bottom:1.5px solid var(--txt-2);transform:translateY(-3px) rotate(45deg)}
.pmap-all[open] .pmap-all-s::after{transform:translateY(2px) rotate(-135deg)}
.pmap-all-s:hover{color:var(--accent-txt,var(--txt))}
.pmap-list{min-width:0;padding-top:12px}
.pmap-h{margin:28px 0 8px;font:500 .78rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2)}
.pmap-st-h{margin:36px 0 0;padding-bottom:10px;font-size:1rem;font-weight:500;color:var(--txt);border-bottom:1px solid var(--line-2)}
.pmap-rows{margin:0;padding:0;list-style:none}
.pmap-row{border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--hdr,72px) + 24px)}
.pmap-row[hidden]{display:none}
.pmap-a{display:grid;gap:4px;min-height:44px;padding:18px 12px;color:var(--txt);text-decoration:none;transition:background-color .2s}
@container (min-width:880px){.pmap-a,.pmap-pl-row{grid-template-columns:minmax(0,2.4fr) minmax(0,1.5fr) 7.5rem minmax(0,1.5fr);gap:6px 32px;align-items:baseline}}
.pmap-a:hover{background:var(--accent-a08)}
.pmap-a:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:-2px}
.pmap-t{font-weight:500;line-height:1.35;letter-spacing:-.01em}
.pmap-where{display:grid;gap:2px;font-size:.92rem;line-height:1.45;color:var(--txt-2)}
.pmap-approx{font-size:.8rem;color:var(--txt-3)}
.pmap-y{font-size:.88rem;color:var(--txt-2);font-variant-numeric:tabular-nums}
.pmap-who{font-size:.88rem;line-height:1.45;color:var(--txt-2)}

/* The works register's phone disclosure on /projects/ (Q16; regmore.js, map_section.register_window()): at 768 px and
   below the rows after the first eight take .reg-cut until "Show all 44 works" is pressed. The button is a ghost plate. */
.reg-cut{display:none!important}
.regmore{margin-top:var(--gap,20px)}
.regmore-btn[hidden]{display:none}
@media (min-width:769px){.regmore{display:none}}
@media print{.reg-cut{display:revert!important}.regmore{display:none}}

/* The compact copy on the home Bridges panel: the map with every plate, beside a short line, all one link. */
.pmap-mini{--cut:var(--cut-lg,12px);--edge:var(--line-2);--fill:var(--surface);--ew:1px;display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:18px;align-items:center;
  max-width:30rem;margin-top:28px;padding:14px 18px 14px 14px;color:var(--txt);text-decoration:none;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  background:linear-gradient(var(--edge),var(--edge)) top/100% var(--ew) no-repeat,linear-gradient(var(--edge),var(--edge)) bottom/100% var(--ew) no-repeat,
    linear-gradient(var(--edge),var(--edge)) left/var(--ew) 100% no-repeat,linear-gradient(var(--edge),var(--edge)) right/var(--ew) 100% no-repeat,
    linear-gradient(to bottom right,transparent 50%,var(--edge) 0 calc(50% + var(--ew)),transparent 0) top left/var(--cut) var(--cut) no-repeat,
    linear-gradient(to bottom right,transparent calc(50% - var(--ew)),var(--edge) 0 50%,transparent 0) bottom right/var(--cut) var(--cut) no-repeat,var(--fill);
  transition:--edge .25s}
.pmap-mini:hover{--edge:var(--warm)}
/* slop-ok: outline-none replaced by designed :focus-visible (the plate's own edge, 2 px) */
.pmap-mini:focus-visible{outline:none;--edge:var(--txt);--ew:2px}
.pmap-mini-map{position:relative;display:block}
.pmap-mini .pmap-mark{transform-box:fill-box;transform-origin:center;transform:scale(1.5)}
.pmap-mini :is(.pmap-ring,.pmap-count){display:none}
.pmap-mini-txt{display:grid;gap:6px;font-size:.92rem;line-height:1.45;color:var(--txt-2)}
.pmap-mini-t{font-size:1.02rem;font-weight:500;color:var(--txt)}
.pmap-mini-go{color:var(--accent-txt,var(--txt));font-weight:500}


/* Reduced motion: nothing on the map moves or fades. */
@media (prefers-reduced-motion:reduce){
  .pmap-st,.pmap-g,.pmap-card,.pmap-switch button,.pmap-a,.pmap-mini{transition:none}
}

/* High contrast: system colours, plain edges. */
@media (forced-colors:active){
  .pmap-st{fill:Canvas;stroke:CanvasText}
  .pmap-st.is-on{fill:Highlight}
  .pmap-pin{color:CanvasText}
  .pmap-pin:is(:hover,.is-on,:focus-visible){color:Highlight}
  .pmap-wire,.pmap-wire.is-on{stroke:CanvasText;stroke-opacity:1}
  .pmap-switch button,.pmap-card,.pmap-panel,.pmap-x,.pmap-mini{clip-path:none;border:1px solid ButtonText}
  .pmap-switch button[aria-pressed="true"],.pmap-card[aria-expanded="true"]{border-width:3px}
  :is(.pmap-switch button,.pmap-card,.pmap-x,.pmap-mini):focus-visible{outline:2px solid Highlight}
}

/* Print: the map and the cards, no switch, lines or panel. */
@media print{
  .pmap-switch,.pmap-wires,.pmap-panel{display:none!important}
  .pmap-stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pmap-col{display:contents}
  .pmap-frame{grid-column:1/-1;order:-1;width:15cm;margin:0 auto 12px;break-inside:avoid}
  .pmap-card{break-inside:avoid}
  .pmap-a{padding-block:6px;min-height:0}
  .pmap-row{break-inside:avoid}
}

/* Phones: the 14 px floor for the map's small text (style.css keeps the same floor for its own labels). */
@media (max-width:640px){
  .pmap-n,.pmap-h,.pmap-card-n,.pmap-card-t,.pmap-pl-n,.pmap-approx,.pmap-y,.pmap-who{font-size:14px}
  .pmap-card{padding:12px 12px 14px}
  .pmap-card-t+.pmap-card-t{display:none}
}