/**
 * @file colour-tag.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The colour tag of a workspace section, document or record: a small dot that opens a row of
 *   swatches (seven theme colours and "no colour"), and the colour token the chosen colour sets for the
 *   rail on the left of the thing it marks. A .colour-tag--<colour> class sets --colour-tag; the dot,
 *   the swatch and a rail read it, so the colours follow the theme. Drawn by components/ColorPicker.js
 *   (the dot and the swatches) and components/DocTree.js (the rail of a section or a document); a
 *   record's rail is the List's own (css/components/list.css, the same tokens).
 *   The rail's 3px reads --shape-frame-heavy; the swatch row is a small pop-up, so its corner reads
 *   --shape-corner-dialog and its shadow --shape-shadow. The dot and the swatches stay circles.
 *   NOTE: this file must be linked in spa.html, just AFTER views/profile.css.
 * @version-history
 *   v2.0.0 -- 2026-09-26 -- The component's own names (.colour-tag, -dot, -pop, -swatch, .colour-tag--<colour>)
 *     for components/ColorPicker.js; .pj-cp* go with views/profile/organisms/workspace/color-picker.js
 *     (now a re-export). The old .pj-tag-* and .pj-colored stay only while the design lab's demo
 *     (views/design-lab/demos-settings.js, "dots and rails") writes them (page migration G2b).
 *   v1.1.0 -- 2026-09-26 -- The swatch row's 8px corner reads --shape-corner-dialog and its soft shadow --shape-shadow (Jouni's note on the round's shape check: "tee samankaltaiseksi tyyli kuin muuallakin").
 *   v1.0.0 -- 2026-09-25 -- Moved out of views/profile.css (UI consolidation phase 5, a move).
 */

/* ── The colours (preset palette → theme tokens; never a free hex) ── */
.colour-tag--red    { --colour-tag: var(--danger); }
.colour-tag--orange { --colour-tag: var(--orange); }
.colour-tag--yellow { --colour-tag: var(--yellow); }
.colour-tag--green  { --colour-tag: var(--success); }
.colour-tag--blue   { --colour-tag: var(--blue); }
.colour-tag--purple { --colour-tag: var(--purple); }
.colour-tag--gray   { --colour-tag: var(--badge-node-bg); }

/* ── The dot and its swatches ── */
.colour-tag { position: relative; display: inline-flex; align-items: center; }
.colour-tag-dot { width: 11px; height: 11px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; flex-shrink: 0; opacity: 0.55; }
.colour-tag-dot:hover, .colour-tag-dot:focus-visible { opacity: 1; }
.colour-tag-dot--set { background: var(--colour-tag); opacity: 1; }
.colour-tag-dot--empty { background: transparent; border: 1.5px solid var(--border); }
.colour-tag-pop { position: absolute; top: 100%; left: 0; z-index: 30; display: flex; gap: 4px; padding: 5px; margin-top: 3px; background: var(--card); border: 1px solid var(--border); border-radius: var(--shape-corner-dialog); box-shadow: var(--shape-shadow); }
.colour-tag-swatch { width: 16px; height: 16px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--colour-tag); }
.colour-tag-swatch--none { background: var(--bg-dim); color: var(--muted); border: 1px solid var(--border); font-size: 0.7rem; line-height: 14px; text-align: center; }

/* ── The old names, kept while the design lab's demo writes them (views/design-lab/demos-settings.js) ── */
.pj-tag-red    { --pj-tag: var(--danger); }
.pj-tag-orange { --pj-tag: var(--orange); }
.pj-tag-yellow { --pj-tag: var(--yellow); }
.pj-tag-green  { --pj-tag: var(--success); }
.pj-tag-blue   { --pj-tag: var(--blue); }
.pj-tag-purple { --pj-tag: var(--purple); }
.pj-tag-gray   { --pj-tag: var(--badge-node-bg); }
.pj-colored { border-left: var(--shape-frame-heavy) solid var(--pj-tag); padding-left: 0.45rem; }