/*
 * Entity glyph + marker visual vocabulary (JCB-358).
 *
 * Per-entity-type color tokens and shared sizing for the EntityGlyph and
 * EntityMarker components. The glyph SVGs use stroke="currentColor" so any
 * surface can tint them by setting `color` on a wrapper.
 *
 * Naming: --glyph-{slug} where slug matches the EntityGlyph EntityType value
 * normalised to lowercase-hyphen (e.g. ReadinessActivity -> readiness-activity).
 */

:root {
    /* Default glyph foreground — overridden per entity below. */
    --glyph-default: var(--color-text-sub, #6b7280);

    /* Schedule semantic family (markers + glyphs share the same hue). */
    --glyph-milestone: #4f46e5;            /* indigo — flagship dates */
    --glyph-readiness-activity: #0d9488;   /* teal — operational readiness work */
    --glyph-risk: #e0382e;                 /* red — uncertainty */
    --glyph-issue: #f59e0b;                /* amber — current problem */
    --glyph-task: #475569;                 /* slate — generic action item */

    /* Hierarchy (project structure). */
    --glyph-project: #1e293b;
    --glyph-construction-phase: #b45309;   /* construction amber */
    --glyph-orat-phase: #4338ca;
    --glyph-facility: #334155;
    --glyph-floor: #475569;
    --glyph-space: #64748b;

    /* Asset / artifact family. */
    --glyph-equipment: #4f4f58;
    --glyph-specification: #374151;
    --glyph-document: #6b7280;
    --glyph-attachment: #6b7280;

    /* Process family. */
    --glyph-procedure: #0369a1;            /* blue — verify */
    --glyph-training: #7c3aed;             /* purple — learning */
    --glyph-trial: #0891b2;                /* cyan — experiment */
    --glyph-tour: #65a30d;                 /* lime — walkthrough */

    /* People family. */
    --glyph-stakeholder: #1f2937;
    --glyph-contact: #475569;
    --glyph-working-group: #475569;
}

/* Wrapper that sizes the inlined SVG and tints via currentColor. */
.glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--glyph-default);
    line-height: 0;
}

.glyph svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Per-entity color modifiers — apply alongside .glyph. */
.glyph--project { color: var(--glyph-project); }
.glyph--construction-phase { color: var(--glyph-construction-phase); }
.glyph--orat-phase { color: var(--glyph-orat-phase); }
.glyph--facility { color: var(--glyph-facility); }
.glyph--floor { color: var(--glyph-floor); }
.glyph--space { color: var(--glyph-space); }
.glyph--equipment { color: var(--glyph-equipment); }
.glyph--specification { color: var(--glyph-specification); }
.glyph--milestone { color: var(--glyph-milestone); }
.glyph--readiness-activity { color: var(--glyph-readiness-activity); }
.glyph--risk { color: var(--glyph-risk); }
.glyph--issue { color: var(--glyph-issue); }
.glyph--task { color: var(--glyph-task); }
.glyph--procedure { color: var(--glyph-procedure); }
.glyph--training { color: var(--glyph-training); }
.glyph--trial { color: var(--glyph-trial); }
.glyph--tour { color: var(--glyph-tour); }
.glyph--stakeholder { color: var(--glyph-stakeholder); }
.glyph--contact { color: var(--glyph-contact); }
.glyph--working-group { color: var(--glyph-working-group); }
.glyph--document { color: var(--glyph-document); }
.glyph--attachment { color: var(--glyph-attachment); }

/* ── EntityMarker (primitives for tiny / dense use) ─────────────────────── */
.marker {
    display: inline-block;
    flex-shrink: 0;
    color: var(--glyph-default);
    line-height: 0;
}
.marker svg { width: 100%; height: 100%; display: block; fill: currentColor; }

/* Marker color shares the glyph palette so timeline + thumbnails read alike. */
.marker--milestone { color: var(--glyph-milestone); }
.marker--readiness-activity { color: var(--glyph-readiness-activity); }
.marker--risk { color: var(--glyph-risk); }
.marker--issue { color: var(--glyph-issue); }
.marker--task { color: var(--glyph-task); }