/* Intentset Atlas: the map */
.am-map { --am-purpose: light-dark(#7c3aed, #c4b5fd); --am-meaning: light-dark(#0f766e, #5eead4);
  --am-architecture: light-dark(#b45309, #fcd34d); --am-verification: light-dark(#1d4ed8, #93c5fd);
  --am-knowledge: light-dark(#be185d, #f9a8d4); --am-pass: light-dark(#15803d, #4ade80);
  --am-fail: light-dark(#b91c1c, #f87171); --am-warn: light-dark(#a16207, #facc15); position: relative; }
.am-controls { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: .5rem; }
.am-controls[hidden], .am-panel[hidden] { display: none; }
.am-find input { margin-left: .25rem; min-width: 12rem; max-width: 100%; }
.am-filter { display: flex; flex-wrap: wrap; gap: .25rem .75rem; border: 0; margin: 0; padding: 0; }
.am-filter legend { float: left; margin-right: .5rem; padding: 0; font-weight: 600; }
.am-swatch { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .3em; background: var(--am-meaning); }
.am-zoom button { min-width: 2.75rem; min-height: 2.75rem; margin-right: .25rem; }
.am-svg { display: block; width: 100%; height: auto; max-height: min(75vh, 48rem); min-height: 14rem; border: 1px solid var(--ms-border); border-radius: var(--ms-radius); background: var(--ms-surface); touch-action: none; }
.am-svg.am-grabbing { cursor: grabbing; }
.am-edge { stroke: var(--ms-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.am-node circle { fill: var(--am-meaning); stroke: var(--ms-surface); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
/* Sizes in user units are for the picture alone; the script sets each shown ID's size and each circle's radius so they
   stay about the same on screen at any zoom, and the halo's width with them. */
.am-node text { fill: var(--ms-fg); cursor: pointer; paint-order: stroke; stroke: var(--ms-surface); }
.am-svg:not(.am-js) .am-node text { font-size: 9px; stroke-width: 3px; }
.am-many .am-node text { display: none; }
.am-many.am-js .am-node.am-label text { display: inline; }
[data-group="purpose"] { --am-c: var(--am-purpose); } [data-group="meaning"] { --am-c: var(--am-meaning); }
[data-group="architecture"] { --am-c: var(--am-architecture); } [data-group="verification"] { --am-c: var(--am-verification); }
[data-group="knowledge"] { --am-c: var(--am-knowledge); }
.am-node circle, .am-swatch { fill: var(--am-c); background: var(--am-c); }
.am-node[data-status="draft"] circle { stroke: var(--am-c); stroke-dasharray: 2 1.5; fill-opacity: .35; }
.am-node[data-tone] circle { stroke-width: 3px; }
.am-node[data-tone="success"] circle { stroke: var(--am-pass); }
.am-node[data-tone="danger"] circle { stroke: var(--am-fail); }
.am-node[data-tone="warn"] circle { stroke: var(--am-warn); }
.am-node[data-tone="neutral"] circle { stroke: var(--ms-muted, var(--ms-border)); }
.am-node:focus { outline: none; }
.am-node:focus-visible circle, .am-node.am-selected circle { stroke: var(--ms-fg); stroke-width: 3px; }
.am-focus .am-node:not(.am-selected):not(.am-near), .am-focus .am-edge:not(.am-near) { opacity: .15; }
.am-focus .am-edge.am-near { stroke: var(--ms-fg); stroke-width: 1.5; }
.am-panel { margin-top: .5rem; padding: .75rem 1rem; border: 1px solid var(--ms-border); border-radius: var(--ms-radius); background: var(--ms-surface); }
.am-panel h3 { margin: 0 0 .25rem; font-size: 1rem; }
.am-panel ul { margin: .25rem 0 0; padding-left: 1.2rem; }
/* Full screen: the map fills the screen, the controls above it and the panel over its corner. Where the browser has no
   element full screen (an iPhone), the same layout is a fixed overlay. */
.am-map:fullscreen, .am-map.am-expanded { display: flex; flex-direction: column; box-sizing: border-box; padding: .75rem;
  background: var(--ms-bg); color: var(--ms-fg); overflow: hidden; }
.am-map.am-expanded { position: fixed; inset: 0; z-index: 1000; }
.am-map:fullscreen .am-svg, .am-map.am-expanded .am-svg { flex: 1; height: auto; min-height: 0; max-height: none; }
.am-map:fullscreen .am-panel, .am-map.am-expanded .am-panel { position: absolute; right: 1.25rem; bottom: 1.25rem;
  width: min(22rem, calc(100% - 2.5rem)); max-height: 40%; overflow: auto; margin: 0; box-shadow: 0 4px 16px rgb(0 0 0 / .2); }
.am-panel button { font: inherit; background: none; border: 0; padding: 0; color: var(--ms-link, inherit); text-decoration: underline; cursor: pointer; }
.am-hide-purpose [data-group="purpose"], .am-hide-purpose .am-edge[data-g1="purpose"], .am-hide-purpose .am-edge[data-g2="purpose"],
.am-hide-meaning [data-group="meaning"], .am-hide-meaning .am-edge[data-g1="meaning"], .am-hide-meaning .am-edge[data-g2="meaning"],
.am-hide-architecture [data-group="architecture"], .am-hide-architecture .am-edge[data-g1="architecture"], .am-hide-architecture .am-edge[data-g2="architecture"],
.am-hide-verification [data-group="verification"], .am-hide-verification .am-edge[data-g1="verification"], .am-hide-verification .am-edge[data-g2="verification"],
.am-hide-knowledge [data-group="knowledge"], .am-hide-knowledge .am-edge[data-g1="knowledge"], .am-hide-knowledge .am-edge[data-g2="knowledge"] { display: none; }