/* Snowflake Generator: the artifact (decisions/029). A naturalist's snowflake notebook, 1880s Vermont: glass slides on black card,
   ink captions, catalogue numbers. It knows nothing of the Zoo; its one nod is the title, in the cabinet's title type (Ultra).
   Repo-authored because the design skill ships no exhibits/snowflake-generator/artifact.css. Every rule sits under the artifact's scope,
   so nothing here reaches the cabinet. Colour comes from snowflake-palette.css; this file holds no literals. */

[data-artifact="snowflake-generator"] {
  --sf-serif: "IM Fell English", Georgia, "Times New Roman", serif;
  --sf-hand: "Caveat", "Segoe Script", cursive;
  --sf-title: "Ultra", Georgia, serif; /* the nod: AppZoo's title type */
  --stage-size: min(100%, max(240px, calc(100svh - 360px)));

  box-sizing: border-box;
  max-width: 1040px;
  margin: 0 auto 32px;
  padding: 16px 16px 28px;
  background: var(--sf-page);
  color: var(--sf-ink);
  font: 400 18px/1.55 var(--sf-serif);
  border-left: 6px double var(--sf-brass-line);
  box-shadow: 0 14px 30px -20px var(--sf-shade);
}
[data-artifact="snowflake-generator"] *, [data-artifact="snowflake-generator"] *::before, [data-artifact="snowflake-generator"] *::after { box-sizing: border-box; }
[data-artifact="snowflake-generator"] [hidden] { display: none !important; }

[data-artifact="snowflake-generator"] .sf-mast { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 16px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--sf-brass-line); }
[data-artifact="snowflake-generator"] .sf-title { margin: 0; font: 400 clamp(22px, 4vw, 32px)/1.1 var(--sf-title); color: var(--sf-ink); }
[data-artifact="snowflake-generator"] .sf-kicker { margin: 0; font: 400 15px/1.3 var(--sf-hand); color: var(--sf-muted); letter-spacing: .02em; }

/* Mode switch: two real links, set as index tabs on the page edge. */
[data-artifact="snowflake-generator"] .flake-modes { display: flex; gap: 6px; margin: 0 0 14px; }
[data-artifact="snowflake-generator"] .flake-mode { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 44px; padding: 0 12px; text-align: center; text-decoration: none; color: var(--sf-ink); background: var(--sf-bone); border: 1px solid var(--sf-brass-line); border-bottom-width: 3px; border-radius: 3px 3px 0 0; font: 400 17px/1.2 var(--sf-serif); }
[data-artifact="snowflake-generator"] .flake-mode:hover { background: var(--sf-bone-hi); }
[data-artifact="snowflake-generator"] .flake-mode[aria-current="page"] { background: var(--sf-card); color: var(--sf-label); border-color: var(--sf-card); }
:root[data-theme="dark"] [data-artifact="snowflake-generator"] .flake-mode[aria-current="page"] { color: var(--sf-brass); border-color: var(--sf-brass-line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) [data-artifact="snowflake-generator"] .flake-mode[aria-current="page"] { color: var(--sf-brass); border-color: var(--sf-brass-line); } }
[data-artifact="snowflake-generator"] .flake-mode:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }

/* The bench: the slide and the apparatus. */
[data-artifact="snowflake-generator"] .flake-bench { display: grid; justify-items: center; gap: 14px; }
[data-artifact="snowflake-generator"] .sf-slide { margin: 0; width: var(--stage-size); max-width: 100%; padding: 10px 10px 0; background: var(--sf-card); border-radius: 3px; box-shadow: 0 8px 18px -10px var(--sf-shade); animation: sf-settle .5s ease-out both; }
[data-artifact="snowflake-generator"] .flake-stage { position: relative; width: 100%; aspect-ratio: 1; padding: 6px; background: var(--sf-glass); border: 2px solid var(--sf-rim); border-radius: 2px; }
[data-artifact="snowflake-generator"] .flake-stage svg { display: block; width: 100%; height: 100%; }
[data-artifact="snowflake-generator"] .flake-stage-draw svg g { stroke: var(--sf-flake); }
[data-artifact="snowflake-generator"] .flake-stage-ice { background: var(--sf-dark); }
[data-artifact="snowflake-generator"] .flake-ice-0 { stroke: var(--sf-ice-0); }
[data-artifact="snowflake-generator"] .flake-ice-1 { stroke: var(--sf-ice-1); }
[data-artifact="snowflake-generator"] .flake-ice-2 { stroke: var(--sf-ice-2); }
[data-artifact="snowflake-generator"] .flake-ice-3 { stroke: var(--sf-ice-3); }
[data-artifact="snowflake-generator"] .flake-ice-edge { stroke: var(--sf-ice-edge); }
[data-artifact="snowflake-generator"] .flake-ice-ring { stroke: var(--sf-ice-ring); }
[data-artifact="snowflake-generator"] .flake-ice-ridge { stroke: var(--sf-ice-ridge); }
[data-artifact="snowflake-generator"] .flake-stage-draw { touch-action: none; cursor: crosshair; }
[data-artifact="snowflake-generator"] .flake-stage-draw svg { user-select: none; }
[data-artifact="snowflake-generator"] .flake-guide line { stroke: var(--sf-guide); stroke-width: 0.4; stroke-dasharray: 2 2; }
[data-artifact="snowflake-generator"] .flake-guide .flake-wedge { fill: var(--sf-wedge); stroke: none; }
[data-artifact="snowflake-generator"] .flake-stage[data-guide="off"] .flake-guide { display: none; }
[data-artifact="snowflake-generator"] .flake-ink-0 { stroke: var(--sf-ink-0); }
[data-artifact="snowflake-generator"] .flake-ink-1 { stroke: var(--sf-ink-1); }
[data-artifact="snowflake-generator"] .flake-ink-2 { stroke: var(--sf-ink-2); }
[data-artifact="snowflake-generator"] .flake-ink-3 { stroke: var(--sf-ink-3); }
[data-artifact="snowflake-generator"] .flake-ink-4 { stroke: var(--sf-ink-4); }

/* The paper label pasted on the card: ink caption and catalogue line. Text beside the slide, never part of the image. */
[data-artifact="snowflake-generator"] .sf-label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; margin: 8px -10px 0; padding: 6px 12px 8px; background: var(--sf-label); color: var(--sf-label-ink); border-radius: 0 0 3px 3px; }
[data-artifact="snowflake-generator"] .sf-hand { min-width: 0; overflow-wrap: anywhere; font: 500 22px/1.15 var(--sf-hand); }
[data-artifact="snowflake-generator"] .sf-cat { font: 400 14px/1.3 var(--sf-serif); letter-spacing: .04em; }

/* The apparatus. */
[data-artifact="snowflake-generator"] .flake-tools { width: 100%; display: grid; gap: 12px; align-content: start; padding: 12px; background: var(--sf-bone); border: 1px solid var(--sf-brass-line); border-radius: 3px; box-shadow: inset 0 0 0 3px var(--sf-bone-hi); }
[data-artifact="snowflake-generator"] .flake-tools-js { display: grid; gap: 12px; }
[data-artifact="snowflake-generator"] .flake-field { display: grid; gap: 2px; }
[data-artifact="snowflake-generator"] .flake-field label, [data-artifact="snowflake-generator"] #flake-link label, [data-artifact="snowflake-generator"] .flake-colors legend { font: 400 18px/1.3 var(--sf-serif); font-weight: 700; color: var(--sf-ink); }
[data-artifact="snowflake-generator"] .flake-hint, [data-artifact="snowflake-generator"] .flake-note, [data-artifact="snowflake-generator"] .flake-status { margin: 0; font: 400 16px/1.4 var(--sf-serif); color: var(--sf-muted); }
[data-artifact="snowflake-generator"] .flake-tools input[type="text"] { width: 100%; min-height: 44px; padding: 6px 12px; font: 400 18px/1.3 var(--sf-serif); color: var(--sf-ink); background: var(--sf-field); border: 1px solid var(--sf-brass-line); border-radius: 2px; }
[data-artifact="snowflake-generator"] .flake-tools input[type="range"] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--sf-brass); }
[data-artifact="snowflake-generator"] .flake-tools input:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
[data-artifact="snowflake-generator"] .flake-seedrow { display: flex; align-items: flex-end; gap: 8px; }
[data-artifact="snowflake-generator"] .flake-seedrow .flake-field { flex: 1; min-width: 0; }
[data-artifact="snowflake-generator"] .flake-brushrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
[data-artifact="snowflake-generator"] .flake-brushrow .flake-field { flex: 1 1 0; min-width: 0; }
[data-artifact="snowflake-generator"] .flake-row { display: flex; gap: 8px; }
[data-artifact="snowflake-generator"] .flake-val { font-weight: 400; color: var(--sf-muted); white-space: nowrap; }
[data-artifact="snowflake-generator"] .flake-habit { margin: 0; font: 400 17px/1.4 var(--sf-serif); color: var(--sf-ink); }

[data-artifact="snowflake-generator"] .sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; font: 400 17px/1.2 var(--sf-serif); color: var(--sf-ink); background: var(--sf-bone-hi); border: 1px solid var(--sf-brass-line); border-bottom-width: 3px; border-radius: 3px; cursor: pointer; white-space: nowrap; transition: background .15s ease; }
[data-artifact="snowflake-generator"] .sf-btn:hover { background: var(--sf-field); }
[data-artifact="snowflake-generator"] .sf-btn:active { border-bottom-width: 1px; transform: translateY(2px); }
[data-artifact="snowflake-generator"] .sf-btn:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
[data-artifact="snowflake-generator"] .flake-row .sf-btn { flex: 1; padding: 0 8px; }
[data-artifact="snowflake-generator"] .sf-icon { width: 20px; height: 20px; flex: none; }

/* Ink: round wells, the chosen one ringed twice. The names stay for screen readers. */
[data-artifact="snowflake-generator"] .flake-colors { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
[data-artifact="snowflake-generator"] .flake-colors legend { float: left; margin-right: 8px; padding: 0; line-height: 44px; }
[data-artifact="snowflake-generator"] .flake-swatch { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; }
[data-artifact="snowflake-generator"] .flake-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
[data-artifact="snowflake-generator"] .flake-swatch-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-artifact="snowflake-generator"] .flake-chip { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--sf-brass-line); }
[data-artifact="snowflake-generator"] .flake-swatch:has(input:checked) .flake-chip { box-shadow: 0 0 0 2px var(--sf-bone), 0 0 0 4px var(--sf-ink); }
[data-artifact="snowflake-generator"] .flake-swatch:has(input:focus-visible) .flake-chip { outline: 3px solid var(--sf-focus); outline-offset: 4px; }
[data-artifact="snowflake-generator"] .flake-chip-0 { background: var(--sf-ink-0); }
[data-artifact="snowflake-generator"] .flake-chip-1 { background: var(--sf-ink-1); }
[data-artifact="snowflake-generator"] .flake-chip-2 { background: var(--sf-ink-2); }
[data-artifact="snowflake-generator"] .flake-chip-3 { background: var(--sf-ink-3); }
[data-artifact="snowflake-generator"] .flake-chip-4 { background: var(--sf-ink-4); }
[data-artifact="snowflake-generator"] .flake-check label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
[data-artifact="snowflake-generator"] .flake-check input { width: 20px; height: 20px; accent-color: var(--sf-brass); }
[data-artifact="snowflake-generator"] .flake-check input:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }

/* The shelf: a row of mounted slides from the same notebook. Decoration only: no control, no result, no link. */
[data-artifact="snowflake-generator"] .sf-shelf { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
[data-artifact="snowflake-generator"] .sf-vial { display: grid; gap: 0; margin: 0; padding: 6px 10px; min-width: 112px; text-align: center; background: var(--sf-card); color: var(--sf-label); border-radius: 2px; font: 400 13px/1.3 var(--sf-serif); }
:root[data-theme="dark"] [data-artifact="snowflake-generator"] .sf-vial { color: var(--sf-brass); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) [data-artifact="snowflake-generator"] .sf-vial { color: var(--sf-brass); } }
[data-artifact="snowflake-generator"] .sf-vial-date { font: 500 16px/1.1 var(--sf-hand); }

/* Words come after the tool. */
[data-artifact="snowflake-generator"] .flake-intro, [data-artifact="snowflake-generator"] .flake-note { margin: 28px 0 0; }
[data-artifact="snowflake-generator"] h2:not(.sf-title) { margin: 24px 0 4px; font: 400 22px/1.2 var(--sf-serif); font-weight: 700; color: var(--sf-brass); }
[data-artifact="snowflake-generator"] p { margin: 8px 0 0; }
[data-artifact="snowflake-generator"] a { color: var(--sf-brass); }
[data-artifact="snowflake-generator"] a:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }

@keyframes sf-settle { from { transform: translateY(-6px) rotate(-0.6deg); opacity: .6; } to { transform: none; opacity: 1; } }

/* Narrow screens keep the main controls on the first screen: the hints become descriptions for screen readers only. */
@media (max-width: 55.99rem) {
  [data-artifact="snowflake-generator"] .flake-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-artifact="snowflake-generator"] .flake-tools { padding: 8px 12px; gap: 8px; }
  [data-artifact="snowflake-generator"] .flake-field { gap: 0; }
  [data-artifact="snowflake-generator"] .flake-tools input[type="range"] { min-height: 32px; }
}

/* Wide screens: the slide on the left, the apparatus on the right, the pair centred. */
@media (min-width: 56rem) {
  [data-artifact="snowflake-generator"] { --stage-size: clamp(320px, calc(100svh - 300px), 560px); padding: 24px 32px 36px; }
  [data-artifact="snowflake-generator"] .flake-bench { grid-template-columns: var(--stage-size) 400px; justify-content: center; align-items: start; gap: 32px; }
  [data-artifact="snowflake-generator"] .flake-modes { width: fit-content; margin-bottom: 18px; }
  [data-artifact="snowflake-generator"] .flake-mode { padding: 0 28px; white-space: nowrap; }
  [data-artifact="snowflake-generator"] .flake-tools { padding: 16px; gap: 16px; }
  [data-artifact="snowflake-generator"] .flake-colors legend { float: none; width: 100%; margin: 0; line-height: inherit; }
  [data-artifact="snowflake-generator"] .flake-brushrow .flake-field { flex-basis: 100%; }
  [data-artifact="snowflake-generator"] .flake-brushrow .sf-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  [data-artifact="snowflake-generator"] .sf-slide { animation: none; }
  [data-artifact="snowflake-generator"] .sf-btn { transition: none; }
  [data-artifact="snowflake-generator"] .sf-btn:active { transform: none; }
}

[data-artifact="snowflake-generator"] .sf-notes { margin: 24px 0 0; padding-top: 12px; border-top: 1px solid var(--sf-brass-line); max-width: 68ch; }
[data-artifact="snowflake-generator"] .sf-notes h2 { margin: 0 0 6px; font: 400 clamp(20px, 3.4vw, 26px)/1.2 var(--sf-title); }
[data-artifact="snowflake-generator"] .sf-notes h3 { margin: 14px 0 2px; font: 400 19px/1.3 var(--sf-hand); color: var(--sf-muted); }
[data-artifact="snowflake-generator"] .sf-notes p { margin: 0 0 6px; }
[data-artifact="snowflake-generator"] .sf-shapes { width: 100%; margin: 8px 0; border-collapse: collapse; font: 400 16px/1.35 var(--sf-serif); }
[data-artifact="snowflake-generator"] .sf-shapes caption { text-align: left; padding-bottom: 4px; color: var(--sf-muted); font-style: italic; }
[data-artifact="snowflake-generator"] .sf-shapes th, [data-artifact="snowflake-generator"] .sf-shapes td { padding: 4px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sf-brass-line); overflow-wrap: anywhere; }
[data-artifact="snowflake-generator"] .sf-shapes thead th { font-weight: 400; color: var(--sf-muted); }
[data-artifact="snowflake-generator"] .sf-shapes tbody th { font-weight: 400; white-space: nowrap; }
[data-artifact="snowflake-generator"] .sf-sources { margin-top: 12px; font: 400 15px/1.4 var(--sf-serif); color: var(--sf-muted); }