/* Background Experiments - SVG patterns over a photo.

   The panel is the randomize-studio's: its window and controls come from vendor/randomize-studio/css/
   (panel.css, controls.css - local copies, adjust them here freely), and the tokens they read are below,
   taken from the studio's base.css. panel-window.js makes it a floating window you can drag by its
   titlebar and minimize to the button that brings it back. */

:root {
  --panel: 356px;
  --panel-max: 90vh;
  --panel-gap: 20px;
  --bg: #ffffff;
  --ink: #000000;
  --muted: #6b6b6b;
  --faint: #d4d4d4;
  --wash: #f4f4f2;
  --ui-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ui-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg%3E%3Cpath d='M15 9h-1V6c0-2.2-1.8-4-4-4S6 3.8 6 6v3H5c-.5 0-1 .5-1 1v7c0 .5.5 1 1 1h10c.5 0 1-.5 1-1v-7c0-.5-.5-1-1-1zm-4 7H9l.4-2.2c-.5-.2-.9-.8-.9-1.3 0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5c0 .6-.3 1.1-.9 1.3L11 16zm1-7H8V6c0-1.1.9-2 2-2s2 .9 2 2v3z'/%3E%3C/g%3E%3C/svg%3E");   /* held through a re-roll */
  --icon-unlock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg%3E%3Cpath d='M12 9V6c0-1.1-.9-2-2-2s-2 .9-2 2H6c0-2.21 1.79-4 4-4s4 1.79 4 4v3h1c.55 0 1 .45 1 1v7c0 .55-.45 1-1 1H5c-.55 0-1-.45-1-1v-7c0-.55.45-1 1-1h7zm-1 7l-.36-2.15c.51-.24.86-.75.86-1.35 0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5c0 .6.35 1.11.86 1.35L9 16h2z'/%3E%3C/g%3E%3C/svg%3E");   /* free to change */
  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg%3E%3Cpath d='M4 9h12v2H4V9z'/%3E%3C/g%3E%3C/svg%3E");   /* minimize the panel */
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg%3E%3Cpath d='M17 9v2h-6v6H9v-6H3V9h6V3h2v6h6z'/%3E%3C/g%3E%3C/svg%3E");   /* bring it back */
  --icon-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg%3E%3Cpath d='M8 14V8H5l5-6 5 6h-3v6H8zm-2 2v-6H4v8h12.01v-8H14v6H6z'/%3E%3C/g%3E%3C/svg%3E");   /* import one, and upload an image */
  --lbl: 76px;
  --ctl: 22px;
  --icon-randomize: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 118.91 122.88'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.41,23.43l49.53,20.15c1.57,0.64,4.17,1.04,5.74,0.4l52.42-21.41c1.57-0.64-0.02-3.49-1.62-4.05L59.62,0 c-0.4-0.14-10.33,3.48-11.72,3.97L4.79,19.38C3.12,19.97,4.26,22.55,6.41,23.43L6.41,23.43z M116.87,94.34l-51.73,28.06 c-1.49,0.81-3.56,0.69-3.56-1.01l-0.01-66.03c0-1.7,0.14-3.36,1.7-4.03l51.92-22.12c1.56-0.66,3.73-0.07,3.72,1.62l-0.34,59.48 C118.56,92,118.36,93.53,116.87,94.34L116.87,94.34z M104.99,71.09c3.52,1.5,4.55,6.77,2.28,11.78c-2.26,5-6.96,7.84-10.48,6.34 c-3.52-1.5-4.55-6.77-2.28-11.78C96.78,72.43,101.47,69.59,104.99,71.09L104.99,71.09z M86.22,57.28c3.65,1.55,4.7,7.01,2.36,12.19 c-2.34,5.18-7.2,8.12-10.85,6.57c-3.65-1.55-4.7-7.01-2.36-12.19C77.71,58.66,82.57,55.72,86.22,57.28L86.22,57.28z M1.81,93.89 l51.26,27.75c1.49,0.81,3.56,0.69,3.56-1.01l0.01-65.42c0-1.7-0.14-3.36-1.7-4.03L3.72,29.22C2.16,28.55,0,29.15,0,30.85 l0.11,59.02C0.11,91.56,0.32,93.08,1.81,93.89L1.81,93.89z M6.91,75.74c3.21-2.04,7.99,0.29,10.66,5.2s2.24,10.56-0.97,12.6 c-3.21,2.04-7.99-0.29-10.66-5.2C3.27,83.42,3.7,77.78,6.91,75.74L6.91,75.74z M22.06,64.37c3.4-2.06,8.45,0.29,11.28,5.26 c2.83,4.97,2.38,10.67-1.02,12.73c-3.4,2.06-8.45-0.29-11.28-5.26C18.2,72.14,18.66,66.44,22.06,64.37L22.06,64.37z M38.12,52.37 c3.42-2.07,8.51,0.29,11.36,5.26c2.85,4.97,2.39,10.68-1.03,12.74c-3.42,2.07-8.51-0.29-11.36-5.26 C34.24,60.14,34.7,54.44,38.12,52.37L38.12,52.37z M59.16,15.48c6.04,0,10.93,2.34,10.93,5.22c0,2.88-4.89,5.22-10.93,5.22 c-6.03,0-10.93-2.34-10.93-5.22C48.23,17.82,53.13,15.48,59.16,15.48L59.16,15.48z'/%3E%3C/svg%3E");

  --color-ink: #cdd0cf;   /* the nsc-project-* elements below */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #0b0b0d; color: var(--ink); overflow: hidden;
  font-family: var(--ui-sans);
}

/* === STAGE: the whole window; the panel floats over it === */
.stage {
  position: fixed;
  inset: 0;
  /* An explicit size as well: the patterns' generated CSS sets `section.stage { position: relative }`, which
     outranks this, and an empty relative section has no height - nothing on it would show. */
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #0b0b0d;
}

/* === panel: what this page adds to the studio's === */
/* the die on a button that rolls but isn't a section's data-rand (the script binds those to sections) */
[data-mark="randomize"] { --mark: var(--icon-randomize); }

/* Copy pattern CSS: two overlapping sheets, drawn like the studio's other marks (a mask in currentColor) */
[data-mark="copy"] {
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2h11v12H7zm2 2v8h7V4zM2 6h3v2H4v8h7v-1h2v3H2z'/%3E%3C/svg%3E");
}
#copyCSS { width: 20px; padding: 0; }
#copyCSS::before { width: 12px; height: 12px; }
#copyCSS.is-copied { background: var(--ink); color: var(--bg); }   /* a moment inverted: copied */

/* Section headers here don't fold open and shut as the studio's do, so they don't look clickable. */
.panel .grp h3 { cursor: default; }
.panel .grp h3:hover { color: var(--ink); }
/* the notes under a section, in the studio's help-band style */
.panel .hint {
  margin: 8px 0 0;
  font-family: var(--ui-sans); font-size: 11px; line-height: 1.6; color: var(--muted);
}
.panel .hint b { color: var(--ink); font-weight: 600; }

/* Ensure elements like nsc-project-* use the ink color for their background */
[class^="nsc-project-"], [class*=" nsc-project-"] {
  background-color: var(--color-ink) !important;
  color: inherit;
}