/* =============================================================================
   Grafika - only what the shared tool components do not cover: the bar under
   the preview, a static canvas, the photo picker row and small notes.
   ============================================================================= */
/* The canvas's own name for the mono font: the same file as the page's
   JetBrains Mono, declared with the weights the file really has (100-800),
   so "900" draws as ExtraBold instead of the regular cut. The page's own
   mono (declared 300-500 in styles.css) is left alone. */
@font-face{font-family:'Grafika Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url("../../assets/fonts/jetbrains-mono.woff2") format("woff2")}

/* A hairline keeps a black or ink background visible against the page. */
#gfxCanvas{box-shadow:0 0 0 1px var(--rule-d)}

/* Without a photo there is nothing to drag: let a finger scroll the page. */
.tool__canvas.is-static{cursor:default;touch-action:auto}

.gfx__viewBar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px}
.gfx__viewBar .tool__hint{margin:0}

/* Colour swatches and the photo picker hang right under the "Tło" pills. */
.gfx__sub{margin-top:-8px}

.gfx__file{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.gfx__pick{display:inline-flex;align-items:center;cursor:pointer}
.gfx__pick:has(input:focus-visible){outline:2px solid var(--olive);outline-offset:3px}
.gfx__fileName{min-width:0;font-size:11px;letter-spacing:.06em;color:var(--fg-3);overflow-wrap:anywhere}

#gfx .field textarea{min-height:96px}
.gfx__note{margin-top:10px;line-height:1.5}

/* The custom colour lights up only when it, not a swatch, holds the colour.
   (The shared rule in styles.css checks the splitter's swatches only.) */
#gfx .swatches:has(.swatch input:checked) .swatch-custom{border-color:var(--rule-d)}
#gfx .swatches:not(:has(.swatch input:checked)) .swatch-custom{border-color:var(--olive)}