/* The nixshared figure (layouts/shortcodes/nixshared.html): two stacked subfigures, and the
   full-window dialog that holds the expanded atlas. Header, expand button, and subtitles come from
   roadmap.css. */
.nix-shared .ns-panel + .ns-panel { margin-top: var(--sp-6); }
/* subfigure a is two drawings of the same thing: the wide one for the column, the stacked one for
   phones; neither scrolls sideways */
.nix-shared .ns-flow { display: block; width: 100%; height: auto; }
.nix-shared .ns-flow--stack { display: none; }
@media (max-width: 640px) {
  .nix-shared .ns-flow--wide { display: none; }
  /* the stacked drawing runs to the plate's edges: its cells are smaller than the wide one's and
     the labels are not, so it takes the padding back */
  .nix-shared .ns-flow--stack { display: block; width: calc(100% + 2 * var(--sp-4)); margin: 0 calc(-1 * var(--sp-4)); }
}
/* the way into the atlas: a brand block centred under the drawing, part of the figure */
.nix-shared .ns-open {
  display: block; margin: var(--sp-4) auto 0; padding: var(--sp-3) var(--sp-5); border: 0; border-radius: 0;
  background: var(--brand); color: var(--paper); font: 600 11px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.nix-shared .ns-open:hover { background: var(--brand-press); }
.nix-shared .ns-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.nix-shared .ns-open span { margin-left: var(--sp-2); }
/* subfigure b, the progress chart, in the ladder of the post's other figure (Fig. 2): mono axis
   titles and legend, a short mono footnote for the hover hint */
.nix-shared .rf svg text.rf-axis-title { font: 600 11px var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.nix-shared .rf-legend { font: 600 11px var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; gap: var(--sp-2) var(--sp-4); }
.nix-shared .rf-legend i { width: 10px; height: 10px; border: 0.6px solid var(--ink); }
.nix-shared .rf-legend i.dash { width: 18px; height: 0; border: 0; border-top: 2px dashed var(--ink); }
.nix-shared .rf-scenario { font: 10px/1.5 var(--font-mono); margin-top: var(--sp-2); }
dialog.ns-dialog {
  width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0;
  border: 0; padding: var(--sp-4) var(--sp-6); background: var(--ground); color: var(--ink);
  flex-direction: column;
}
/* the dialog's head and close button, own rules (roadmap.css, which had them, left the page with subfigure b) */
dialog.ns-dialog .fig-modal-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex: 0 0 auto; margin: 0 0 var(--sp-4); }
dialog.ns-dialog .rf-expand {
  font-family: var(--font-mono); font-size: 18px; line-height: 1; font-weight: 600;
  background: var(--ground); color: var(--ink);
  border: 1.5px solid var(--ink); padding: 5px 9px; cursor: pointer;   /* spacing-exempt: optical */
}
dialog.ns-dialog .rf-expand:hover { color: var(--cyan); border-color: var(--cyan); }
dialog.ns-dialog .fig-modal-head .stamp__header { margin: 0; font: 600 24px/1.25 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
dialog.ns-dialog[open] { display: flex; }
dialog.ns-dialog::backdrop { background: rgba(10, 10, 10, 0.35); }
.ns-dialog__body { flex: 1 1 0; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
.ns-dialog__body .nix-inline { margin: 0; max-width: none; }
@media (max-width: 640px) { dialog.ns-dialog { padding: var(--sp-3); } }