/* ============================================================
   SVG Flow Renderer Styles
   All styling via design system tokens — dark mode auto-switches.
   Uses --mono-alpha-black-* tokens (properly defined) instead of
   corrupted --mono-* palette.
   ============================================================ */

.svg-flow-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.svg-flow-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}

.svg-flow-canvas:active {
    cursor: grabbing;
}

.svg-overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.svg-overlay-container > * {
    pointer-events: auto;
}

/* ============================================================
   Arrow chevron (open, matching Pixi style)
   ============================================================ */

.arrow-chevron {
    fill: none;
    stroke: var(--fractal-connection, #999999);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============================================================
   Step (atom) boxes
   ============================================================ */

.atom .primary-box {
    /* Inherits fill/stroke from .svg-surface-raised on the element */
    filter: none;
}

.atom.selected .primary-box {
    stroke: var(--color1-500, #6877a6);
    stroke-width: 3;
}

.atom.highlighted .primary-box {
    stroke: var(--color-teal-500, #17a2b8);
    stroke-width: 3;
}

.atom:hover .primary-box {
    fill: var(--bg-raised-hover);
    filter: var(--svg-shadow, drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05)));
    cursor: pointer;
}

.atom.nested:hover .primary-box {
    stroke-opacity: 0;
}

.atom.ghost-step {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

/* ============================================================
   Text labels
   ============================================================ */

.atom text {
    font-family: var(--font-family-base);
    pointer-events: none;
    user-select: none;
}

.atom .step-identifier {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm, 0.75rem);
    font-weight: var(--font-weight-normal);
    fill: var(--text-muted);
}

.secondary-label {
    font-size: var(--font-size-sm, 0.75rem);
    font-weight: var(--font-weight-semibold);
    fill: var(--text-muted);
}

.secondary-label--source {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.secondary-label--target {
    fill: var(--color1-500, #6877a6);
}

.primary-label {
    font-size: var(--font-size-base, 0.875rem);
    font-weight: var(--font-weight-medium);
    fill: var(--text-primary, #1a1a1a);
}

.branch-label-bg {
    fill: var(--bg-base);
}

.branch-letter {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm, 0.75rem);
    font-weight: var(--font-weight-normal);
    fill: var(--text-muted);
}

.branch-label {
    font-size: var(--font-size-lg, 1.125rem);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold);
    fill: var(--text-secondary, #666);
    cursor: pointer;
}

.branch-label:hover {
    fill: var(--text-primary);
}

/* ============================================================
   Chips (bottom of step box)
   ============================================================ */

.chip .chip-bg {
    fill-opacity: 0.15;
    stroke: none;
}

.chip .chip-label {
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.03em;
    pointer-events: none;
}

.chip--decision .chip-bg { fill: var(--color-amber-400, #ffb347); }
.chip--decision .chip-label { fill: var(--color-amber-700, #b8860b); }
.chip--nested .chip-bg { fill: var(--color1-400, #6877a6); }
.chip--nested .chip-label { fill: var(--color1-600, #6877a6); }
.chip--nested { cursor: pointer; pointer-events: auto; }
.chip--loop .chip-bg { fill: var(--color-red-400, #ff4769); }
.chip--loop .chip-label { fill: var(--color-red-600, #e53e3e); }
.chip--task .chip-bg { fill: var(--color-blue-400, #3b82f6); }
.chip--task .chip-label { fill: var(--color-blue-600, #3b82f6); }
.chip--task-active .chip-bg { fill: var(--color-blue-400, #3b82f6); }
.chip--task-active .chip-label { fill: var(--color-blue-600, #3b82f6); }
.chip--task-pending .chip-bg { fill: var(--color-amber-400, #f59e0b); }
.chip--task-pending .chip-label { fill: var(--color-amber-700, #b8860b); }
.chip--task-done .chip-bg { fill: var(--color-green-400, #22c55e); }
.chip--task-done .chip-label { fill: var(--color-green-600, #22c55e); }

/* Graph status dot (top-right of step card) — only shown for steps needing attention */
.graph-dot {
    pointer-events: none;
}
.graph-dot--unmapped { fill: var(--color-orange-400, #f97316); }
.graph-dot--partial { fill: var(--color-amber-400, #f59e0b); }

/* Task badge (bottom-right, pending/in-progress only) */
.task-badge {
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-mono);
    pointer-events: none;
}

.task-badge--pending {
    fill: var(--color-amber-700, #b8860b);
}

.task-badge--active {
    fill: var(--color-blue-600, #3b82f6);
}

/* ============================================================
   Arrows and connections
   ============================================================ */

.step-arrow line,
.branch-connection {
    stroke: var(--fractal-connection, #999999);
    stroke-width: 2;
    fill: none;
}

.branch-connection {
    fill: none;
    stroke-dasharray: none;
}

/* ============================================================
   Empty branch placeholder
   ============================================================ */

.empty-branch-placeholder {
    fill: var(--bg-base, #eeeeee);
    stroke: none;
    transition: fill 0.15s ease;
}

.empty-branch-icon line {
    stroke: var(--text-secondary, #666);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
    transition: stroke 0.15s ease;
}

.empty-branch-text {
    fill: var(--text-secondary, #666);
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm, 13px);
    font-weight: var(--font-weight-semibold, 600);
    text-anchor: start;
    dominant-baseline: central;
    pointer-events: none;
    transition: fill 0.15s ease;
}

/* ============================================================
   Add-step "+" buttons (end-of-branch, between steps, empty)
   ============================================================ */

.branch-hover-area {
    fill: transparent;
    pointer-events: all;
}

.add-step-btn {
    cursor: pointer;
    pointer-events: auto;
}

.add-step-circle {
    fill: var(--bg-base, #eeeeee);
    stroke: var(--grey-steel, #999);
    stroke-width: 1;
    transition: fill 0.15s ease, stroke 0.15s ease;
}

.add-step-icon line {
    stroke: var(--btn-secondary-text, #666);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
    transition: stroke 0.15s ease;
}

.add-step-btn--between,
.add-step-btn--end {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.add-step-btn.hover-visible {
    opacity: 1;
}

.loop-mode .add-step-btn,
.editing-mode .add-step-btn--between,
.editing-mode .add-step-btn--end {
    opacity: 0 !important;
    pointer-events: none;
}

.move-target-icon {
    display: none;
    color: var(--btn-secondary-text, #666);
    pointer-events: none;
    transition: color 0.15s ease;
}

.move-mode .add-step-btn--between,
.move-mode .add-step-btn--end {
    opacity: 1 !important;
}

.move-mode .add-step-icon {
    display: none;
}

.move-mode .move-target-icon {
    display: block;
}

.move-mode .atom.move-source .svg-surface-raised {
    stroke: var(--accent-primary, #2563eb);
    stroke-width: 2;
}

.move-mode .connections-layer {
    display: none;
}

.move-mode .step-arrow {
    display: none;
}

.add-step-btn:hover .add-step-circle {
    fill: var(--btn-primary-hover, #3a8ae6);
    stroke: var(--btn-primary-hover, #3a8ae6);
}

.add-step-btn:hover .add-step-icon line {
    stroke: var(--btn-primary-text, #fff);
}

.add-step-btn:hover .move-target-icon {
    color: var(--btn-primary-text, #fff);
}

.add-step-btn--empty {
    cursor: pointer;
}

.add-step-btn--empty:hover .empty-branch-placeholder {
    fill: var(--btn-primary-hover);
}

.add-step-btn--empty:hover .empty-branch-icon line {
    stroke: var(--btn-primary-text);
}

.add-step-btn--empty:hover .empty-branch-text {
    fill: var(--btn-primary-text);
}

/* ============================================================
   Nested story container
   ============================================================ */

.nested-container-bg {
    /* Inherits fill/stroke from .svg-surface-base on the element */
}

.nested-title {
    font-family: var(--font-family-base);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    fill: var(--text-secondary);
}

.drill-in-link {
    pointer-events: auto;
    cursor: pointer;
}

.drill-in-label {
    font-family: var(--font-family-base);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    fill: var(--text-secondary);
    text-decoration: underline;
}

.drill-in-link:hover .drill-in-label {
    fill: var(--text-primary);
}

/* ============================================================
   Inline step editing (foreignObject textarea)
   Frameless — matches SVG text exactly so no visual jump.
   ============================================================ */

.svg-inline-edit {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 0 none;
    outline: 0 none;
    resize: none;
    padding: 0 12px;
    margin: 0;
    background: transparent;
    color: var(--text-primary, #1a1a1a);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base, 0.875rem);
    font-weight: var(--font-weight-medium);
    line-height: 1.35;
    overflow: hidden;
    cursor: text;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.svg-inline-edit:focus {
    outline: 0 none;
    border: 0 none;
    box-shadow: none;
}

.svg-branch-edit {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 0 none;
    border-bottom: 1px solid var(--btn-primary-hover);
    outline: 0 none;
    padding: 0;
    margin: 0;
    background: var(--bg-base);
    color: var(--text-secondary);
    font-family: var(--font-family-base);
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    cursor: text;
}

.svg-branch-edit:focus {
    outline: 0 none;
    color: var(--text-primary);
}

/* ============================================================
   Collapsed branch cards (semantic zoom)
   ============================================================ */

.collapsed-branch-card {
    /* Inherits fill/stroke from .svg-surface-raised on the element */
    filter: none;
}

.collapsed-branch {
    cursor: pointer;
}

.collapsed-branch:hover .collapsed-branch-card {
    fill: var(--bg-raised-hover);
    filter: var(--svg-shadow, drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05)));
}

.collapsed-branch-letter {
    font-family: var(--font-family-mono);
    font-size: 16px;
    font-weight: var(--font-weight-normal);
    fill: var(--text-muted);
    pointer-events: none;
    user-select: none;
}

.collapsed-branch-label {
    font-family: var(--font-family-base);
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    fill: var(--text-primary, #1a1a1a);
    pointer-events: none;
    user-select: none;
}

.collapsed-branch-count {
    font-family: var(--font-family-mono);
    font-size: 16px;
    font-weight: var(--font-weight-normal);
    fill: var(--text-muted, #999);
    pointer-events: none;
    user-select: none;
}

.collapsed-branch-indicators {
    font-family: var(--font-family-base);
    font-size: 20px;
    fill: var(--text-muted, #999);
    pointer-events: none;
    user-select: none;
}

.collapsed-connection line {
    stroke-dasharray: 6 3;
}

/* ============================================================
   Loop arrows
   ============================================================ */

.loop-arrow .loop-path {
    stroke: var(--fractal-connection, #999999);
    stroke-width: 2;
}

.loop-arrow .chevron {
    stroke: var(--fractal-connection, #999999);
}

.loop-backward .loop-path {
    stroke-dasharray: 4 3;
}

.loop-forward .loop-path {
    stroke-dasharray: none;
}

/* ============================================================
   Loop / selection mode
   ============================================================ */

.loop-mode .atom {
    cursor: pointer;
}

.loop-mode .atom .svg-surface-raised {
    stroke: var(--accent-primary, #2563eb);
    stroke-width: 2;
    stroke-dasharray: 6 3;
    transition: stroke 0.15s ease, stroke-width 0.15s ease;
}

.loop-mode .atom:hover .svg-surface-raised {
    stroke-width: 3;
    stroke-dasharray: none;
}

.loop-mode .atom.loop-source .svg-surface-raised {
    stroke: var(--text-muted, #999);
    stroke-width: 2;
    stroke-dasharray: none;
    opacity: 0.6;
}

.selection-mode-banner {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: var(--bg-raised);
    border: 1px solid var(--accent-primary, #2563eb);
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    z-index: 1000;
    box-shadow: var(--shadow-md);
}