/* ============================================
   FlowChart Academy - Flowchart Shape Styles
   Shared between tutorials and builder
   ============================================ */

/* --- SVG Flowchart Base Styles --- */
.fc-diagram {
    font-family: var(--font-body);
}

/* --- Shape Fills & Strokes --- */
.fc-terminal ellipse,
.fc-terminal rect[rx] {
    fill: var(--fc-terminal-bg);
    stroke: var(--fc-terminal);
    stroke-width: 2;
}

.fc-process rect {
    fill: var(--fc-process-bg);
    stroke: var(--fc-process);
    stroke-width: 2;
}

.fc-decision polygon {
    fill: var(--fc-decision-bg);
    stroke: var(--fc-decision);
    stroke-width: 2;
}

.fc-io polygon {
    fill: var(--fc-io-bg);
    stroke: var(--fc-io);
    stroke-width: 2;
}

/* --- Text inside shapes --- */
.fc-node text {
    font-size: 14px;
    fill: var(--color-text);
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.fc-node text.shape-label {
    font-size: 11px;
    fill: var(--color-text-light);
    font-style: italic;
}

/* --- Arrows --- */
.fc-arrow line,
.fc-arrow path {
    stroke: var(--fc-arrow);
    stroke-width: 2;
    fill: none;
}

.fc-arrow-label {
    font-size: 12px;
    fill: var(--color-text-light);
    font-weight: 600;
}

/* Arrow markers (defined in SVG defs) */
.fc-diagram marker path {
    fill: var(--fc-arrow);
}

/* --- Step-Through States --- */

/* Active node: highlighted with glow */
.fc-node.fc-active ellipse,
.fc-node.fc-active rect,
.fc-node.fc-active polygon {
    stroke: var(--fc-active);
    stroke-width: 3;
    filter: drop-shadow(0 0 8px var(--fc-active-glow));
    transition: all 0.3s ease;
}

.fc-node.fc-active text {
    font-weight: 600;
}

/* Active arrow */
.fc-arrow.fc-active line,
.fc-arrow.fc-active path {
    stroke: var(--fc-active);
    stroke-width: 3;
    transition: all 0.3s ease;
}

.fc-arrow.fc-active .fc-arrow-label {
    fill: var(--fc-active);
}

/* Visited node: dimmed */
.fc-node.fc-visited ellipse,
.fc-node.fc-visited rect,
.fc-node.fc-visited polygon {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.fc-node.fc-visited text {
    opacity: 0.5;
}

.fc-arrow.fc-visited line,
.fc-arrow.fc-visited path {
    opacity: 0.4;
}

/* Inactive (not yet reached) */
.fc-node.fc-inactive ellipse,
.fc-node.fc-inactive rect,
.fc-node.fc-inactive polygon {
    opacity: 0.3;
}

.fc-node.fc-inactive text {
    opacity: 0.3;
}

.fc-arrow.fc-inactive line,
.fc-arrow.fc-inactive path {
    opacity: 0.2;
}

/* Branch labels (Yes/No on decision) */
.branch-yes {
    fill: var(--color-success);
    font-weight: 700;
}

.branch-no {
    fill: var(--color-danger);
    font-weight: 700;
}

/* --- Shape Reference Card SVGs (for lesson 01) --- */
.shape-demo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shape-demo svg {
    width: 120px;
    height: 70px;
}