/* The harness page's map (/harness): its head and legend, the phases beside it, and
   the drawings only this map has: a seat's VM and what it holds, the hub, the network
   policy and the workers. The map itself is map.css, in its paper theme, since the
   section it sits in is paper: every colour is the page's own token, and a word in
   an accent is that accent's ink on its soft ground, at 4.5:1 or more. */
.hm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap}
.hm-head .stack{gap:10px;max-width:640px}
.hm-lede{font-size:15px;color:var(--ink-2)}
.hm-legend{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink-2)}
.hm-legend ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.hm-legend li{display:inline-flex;align-items:center;gap:8px}
.hm-legend b{font-weight:500;color:var(--ink);font-family:var(--mono);font-size:12px}
.hm-legend p{font-size:12.5px;color:var(--ink-3)}
.hm-sw{width:18px;height:3px;border-radius:2px;flex:none}
.hm-sw-kelp{background:var(--kelp)}.hm-sw-slate{background:var(--slate)}.hm-sw-moss{background:var(--moss)}.hm-sw-saffron{background:#b57316}.hm-sw-brick{background:var(--brick)}
.hm-fallback{margin:0}

/* the drawings */
.hm-tag rect{stroke-width:1;fill-opacity:.7;transition:stroke-width .3s}
.hm-tag text{font-size:12px;font-family:var(--sans)}
.hm-tag.is-lit rect{stroke-width:2;fill-opacity:1}
.hm-slate rect{fill:var(--slate-soft);stroke:var(--slate)}.hm-slate text{fill:var(--slate-ink)}
.hm-kelp rect{fill:var(--kelp-soft);stroke:var(--kelp)}.hm-kelp text{fill:var(--kelp-ink)}
.hm-moss rect{fill:var(--moss-soft);stroke:var(--moss)}.hm-moss text{fill:var(--moss-ink)}
.hm-saffron rect{fill:var(--saffron-soft);stroke:#b57316}.hm-saffron text{fill:var(--saffron-ink)}
.hm-brick rect{fill:var(--brick-soft);stroke:var(--brick)}.hm-brick text{fill:var(--brick-ink)}
.hm-veil rect{fill:transparent;stroke:var(--line-2);stroke-dasharray:3 3}
.hm-veil text{font-size:10.5px;fill:var(--ink-3)}
.hm-veil.is-lit rect{stroke:var(--ink-3);stroke-width:1.4}
.hm-veil-k,.hm-k{font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;fill:var(--ink-3)}
.pm-seat [data-share]{cursor:pointer}
.pm-policy .hm-tag text{font-size:9.5px}
.hm-keykind text{font-family:var(--mono);font-size:11px}
.hm-duty rect{fill:var(--paper);stroke:var(--line-2)}
.hm-duty text{font-size:12px;fill:var(--ink-2)}
.hm-duty.is-lit rect{fill:var(--kelp-soft);stroke:var(--kelp)}
.hm-duty.is-lit text{fill:var(--kelp-ink)}
.hm-port rect{fill:var(--card);stroke:var(--kelp);stroke-width:1.2}
.hm-port.is-lit rect{fill:var(--kelp)}
.hm-small{font-size:11px;fill:var(--ink-3)}
.hm-ghost{fill:var(--card);stroke:var(--line-2);stroke-dasharray:3 3}
.pm-chip.hm-slot{cursor:inherit}
.hm-slot .pm-chip-sub{font-size:10.5px;font-family:var(--mono)}
.pm-chip.hm-slot:hover rect{stroke:var(--pm-line)}
.pm-chip.hm-slot.is-busy rect{stroke:var(--kelp)}
.pm-chip.hm-slot.is-busy .pm-chip-sub{fill:var(--kelp-ink)}

/* the working models only this map has */
.hm-paths .pw-btn,.hm-acts .pw-btn{min-height:30px;padding:0 10px;font-size:12.5px}
.hm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.hm-list li::before{content:"· ";color:var(--ink-3)}
.hm-never li{color:var(--brick-ink)}

/* the phases, told in order under the map */
.hm-seq{grid-template-columns:repeat(4,minmax(0,1fr))}
.hm-seq .pm-seq-step h3{font-size:26px}
.hm-seq-head{margin-bottom:-12px}
@media (max-width:1100px){.hm-seq{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.hm-seq{grid-template-columns:minmax(0,1fr)}}