/* feature map (_build/feature_map.py, feature-map.js): numbered legend + large drawing with markers + glass popover,
   then every item as a full card below.
   svg.iso .fm-part[data-fm] = one mapped part; .fm-mk[data-fm] = its numbered marker. .fm-on on the svg = one part
   selected: it stays at full strength with an orange outline, the other parts fall to .25, its marker turns orange. */
svg.iso.fm .fm-part,svg.iso.fm .fm-mk{cursor:pointer}
svg.iso.fm-on .fm-part:not(.fm-cur){opacity:.25}
svg.iso.fm-on>:not(.fm-part):not(.fm-mks):not(style){opacity:.5}
svg.iso.fm-on .fm-cur :is(polygon,polyline,path,circle,ellipse,rect):not(.flow-d):not([fill="#FE5000"]){stroke:#FE5000}
svg.iso.fm-on .fm-cur .lbl text{fill:#FE5000}
svg.iso .fm-mk circle{fill:#fff;stroke:#1A1714}
svg.iso .fm-mk text{fill:#1A1714;pointer-events:none}
svg.iso.fm-on .fm-mk.fm-cur circle{fill:#FE5000;stroke:#FE5000}
svg.iso.fm-on .fm-mk.fm-cur text{fill:#fff}
.fmap.fm-big svg.iso :is(polygon,polyline,path,ellipse,circle,rect){vector-effect:non-scaling-stroke}   /* ink lines stay 0.75 px at any scale */

.fmap{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
/* ---- 1. overview: legend (3 / 12) + drawing (9 / 12), fits one 1440x900 viewport */
.fm-ov{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.fm-side{grid-column:span 3;position:sticky;top:111px;align-self:start}
.fm-leg{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.fm-lb{appearance:none;display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:12px 15px 12px 12px;border:0;border-radius:12px;background:transparent;font:inherit;font-size:15px;line-height:1.45;font-weight:500;color:var(--ink,#1A1714);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fm-lb .ic{width:24px;height:24px;flex:none}
.fm-lt{min-width:0;text-wrap:pretty}
.fm-lb:hover,.fm-lb.fm-act{background:#F6F5F2}
.fm-lb[aria-expanded="true"]{background:#F6F5F2;box-shadow:inset 0 0 0 1px rgba(254,80,0,.5)}
.fm-lb:focus{outline:none}
.fm-lb:focus-visible{outline:2px solid #FE5000;outline-offset:-2px}
.fm-ill{grid-column:span 9;position:relative;background:#F6F5F2;border-radius:24px;padding:36px 42px;display:flex;align-items:center;justify-content:center;height:clamp(420px,calc(100vh - 210px),600px);box-sizing:border-box;overflow:hidden}
.fm-ill svg{display:block;width:auto;height:100%;max-width:100%;max-height:100%}
.fmap.fm-c3 .fm-ill{height:clamp(390px,calc(100vh - 240px),540px)}

/* glass popover (light Liquid Glass): white translucent + blur, fine border, soft shadow, small pointer */
.fm-pop{position:absolute;left:0;top:0;z-index:3;width:300px;max-width:calc(100% - 24px);box-sizing:border-box;padding:18px 21px 21px;border-radius:18px;
  background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(20,18,16,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(20,18,16,.06),0 18px 42px -15px rgba(20,18,16,.3);
  text-align:left;visibility:hidden;opacity:0;transform:translateY(3px) scale(.98);pointer-events:none}
.fm-pop.on{visibility:visible;opacity:1;transform:none;pointer-events:auto}
.fm-arr{position:absolute;width:12px;height:12px;box-sizing:border-box;background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:solid rgba(20,18,16,.09);border-width:0 0 1px 1px;clip-path:polygon(0 0,0 100%,100% 100%);pointer-events:none}
.fm-pop[data-side="r"] .fm-arr{left:-6px;top:var(--ay,50%);margin-top:-6px;transform:rotate(45deg)}
.fm-pop[data-side="l"] .fm-arr{right:-6px;top:var(--ay,50%);margin-top:-6px;transform:rotate(225deg)}
.fm-pop[data-side="d"] .fm-arr{top:-6px;left:var(--ax,50%);margin-left:-6px;transform:rotate(135deg)}
.fm-pop[data-side="u"] .fm-arr{bottom:-6px;left:var(--ax,50%);margin-left:-6px;transform:rotate(315deg)}
.fm-pt{display:flex;align-items:flex-start;gap:9px;margin:0 0 12px;font-size:15px;line-height:1.45;font-weight:500;color:var(--ink,#1A1714)}
.fm-pt .fm-n{background:#FE5000;border-color:#FE5000;color:#fff}
.fm-pb{display:grid;gap:9px;font-size:15px;line-height:1.65;color:var(--body,#3A3632)}
.fm-pb p{margin:0;text-wrap:pretty}
.fm-pb b{display:block;margin-bottom:0;font-size:12px;line-height:1.6;font-weight:400;color:var(--muted,#65686A)}

/* ---- 2. every item in full, always visible (fm-c4 = 4 per row, fm-c3 = 3 per row) */
.fm-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:15px}
.fmap.fm-c3 .fm-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.fmap.fm-c2 .fm-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.fm-i{background:#fff;border-radius:18px;padding:24px 24px 27px;box-shadow:inset 0 0 0 1px rgba(20,18,16,.1);outline:1.5px solid transparent;outline-offset:-1.5px;-webkit-tap-highlight-color:transparent;scroll-margin-top:99px}
.fm-i.fm-act{outline-color:#FE5000;box-shadow:none}
.fm-top{display:flex;align-items:flex-start;gap:12px}
.fm-top .ic{width:27px;height:27px;flex:none;margin-top:-3px}
.fm-n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;margin-top:1px;border-radius:50%;box-sizing:border-box;border:1.2px solid #1A1714;background:#fff;font-size:12px;line-height:1;font-weight:500;color:#1A1714;font-variant-numeric:tabular-nums}
.fm-lb .fm-n{margin-top:0}
.fm-i.fm-act .fm-n,.fm-lb.fm-act .fm-n,.fm-lb[aria-expanded="true"] .fm-n{background:#FE5000;border-color:#FE5000;color:#fff}
.fm-i h3{margin:0;font-size:18px;line-height:1.45;font-weight:500;color:var(--ink,#1A1714)}
.fm-b{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:3px}
.fm-b:focus{outline:none}
.fm-b:focus-visible{outline:2px solid #FE5000;outline-offset:3px}
.fm-d{display:grid;align-content:start;gap:15px;margin-top:18px;padding-left:33px;font-size:15px;line-height:1.7;color:var(--body,#3A3632)}
.fm-d p{margin:0;text-wrap:pretty}
.fm-d b{display:block;margin-bottom:3px;font-size:12px;line-height:1.6;font-weight:400;color:var(--muted,#65686A)}

@media (max-width:1101px){
  .fm-side{grid-column:span 4}
  .fm-ill{grid-column:span 8;padding:24px;height:clamp(390px,calc(100vh - 210px),540px)}
  .fmap.fm-c4 .fm-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* phones: drawing on top, then the cards as a numbered accordion (collapsed only when feature-map.js runs) */
@media (max-width:759px){
  .fmap{gap:12px}
  .fm-ov{display:block}
  .fm-side,.fm-pop{display:none}
  .fm-ill{height:auto;padding:18px;border-radius:15px}
  .fm-ill svg{width:100%;height:auto;max-height:54vh}
  .fmap .fm-list,.fmap.fm-c4 .fm-list,.fmap.fm-c3 .fm-list{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:9px}
  .fm-i{padding:0;border-radius:15px}
  .fm-top{padding:15px 15px 15px 18px;align-items:center}
  .fm-top .ic{margin-top:0}
  .fm-i h3{flex:1;font-size:15px}
  .fm-b{display:block;width:100%}
  .fmap.fm-js .fm-b::after{content:"";float:right;width:6px;height:6px;margin:6px 3px 0 12px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
  .fmap.fm-js .fm-i.fm-open .fm-b::after{transform:translateY(3px) rotate(225deg)}
  .fm-d{margin:0;padding:0 18px 21px 51px;gap:12px}
  .fmap.fm-js .fm-i:not(.fm-open) .fm-d{display:none}
}
@media (prefers-reduced-motion:no-preference){
  svg.iso.fm .fm-part,svg.iso.fm>*{transition:opacity .3s ease}
  .fm-i{transition:background-color .25s ease,outline-color .25s ease}
  .fm-lb{transition:background-color .2s ease,box-shadow .2s ease}
  .fm-pop{transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
  .fm-pop.on{transition:opacity .18s ease,transform .18s ease,visibility 0s}
  .fm-n,svg.iso .fm-mk circle,svg.iso .fm-mk text{transition:fill .2s ease,stroke .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease}
}

*,*::before,*::after{letter-spacing:0!important}