sankey_builder.css

/* Design tokens + pricing card styles shared with the marketing landing
   page (index2.html) — kept in sync so the in-app pricing modal (see
   #pricingModal / renderPricingCards in sankeybuilder.js) looks like the
   same product as the "Simple, Transparent Pricing" section there. */
:root {
    --primary:    #2B4EFF;
    --primary-dk: #1A38E0;
    --surface:    #FFFFFF;
    --surface-2:  #F5F4F0;
    --border:     #E2E0D8;
    --ink:        #0F1117;
    --ink-3:      #5A5F7A;
    --ink-4:      #8B90A8;
    --gold:       #E8A020;
    --bronze:     #A9702F;
    --silver:     #8A93A6;
    --platinum:   #6B4FBB;
}

.plan-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    height: 100%;
    position: relative;
    transition: all 0.25s;
}
.plan-card.tier-bronze   { border-color: var(--bronze); }
.plan-card.tier-silver   { border-color: var(--silver); }
.plan-card.tier-gold     { border-color: var(--gold); }
.plan-card.tier-platinum { border-color: var(--platinum); }
.plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    padding: 0.25rem 0.9rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.plan-badge.tier-free     { background: var(--surface-2); color: var(--ink-3); border: 1.5px solid var(--border); }
.plan-badge.tier-bronze   { background: var(--bronze); color: #fff; }
.plan-badge.tier-silver   { background: var(--silver); color: #fff; }
.plan-badge.tier-gold     { background: var(--gold); color: #3A2A00; }
.plan-badge.tier-platinum { background: var(--platinum); color: #fff; }
.plan-price {
    font-size: 1.9rem;
    font-weight: 900;
    color: var(--ink);
    margin: 0.5rem 0;
}
.btn-plan {
    width: 100%;
    padding: 0.6rem;
    border-radius: 6px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}
.btn-plan-primary {
    background: var(--primary);
    color: white;
}
.btn-plan-primary:hover { background: var(--primary-dk); }
.btn-plan-secondary {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    color: var(--ink);
}
.btn-plan-gold {
    background: var(--gold);
    color: #3A2A00;
}
.btn-plan-gold:hover { background: #d69214; }
.btn-plan-secondary:hover { background: var(--border); }
.btn-plan:disabled {
    opacity: 0.6;
    cursor: default;
}

.ui,.fullscreen-btn {
    display: none;
}

/* Fallback in case the loaded Bootstrap build ever lacks this utility —
   matches Bootstrap 5's own .visually-hidden. Used on .fullscreen-hide-row
   to hide the toolbar/nav row on entering fullscreen without display:none,
   which was causing a Chrome-only (not Brave) fullscreen centering bug. */
.visually-hidden:not(caption) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.floating-msg {
    position: fixed;  /* Position the element relative to the viewport */
    bottom: 74px;     /* Sit above the fixed footer toolbar instead of overlapping it */
    left: 50%;        /* Set the left position to 50% */
    transform: translateX(-50%); /* Offset by half its width to center horizontally */
    z-index: 9999; /* Ensure it appears above other content */
    display: none;
    }

    .btn_background2{
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    width: 100%;
    padding:10px;
    margin-top:10px;
    color:white;
    }

    .invalid-input {
    border: 3px solid red !important;
    border-radius: 10px;
    transition: all 0.3s ease;
    }


    .nav-scroll-container {
    flex-shrink: 0; /* Prevent nav from shrinking */
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    border-bottom: 1px solid #dee2e6;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

#section-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    -webkit-overflow-scrolling: touch;
}

.section-content {
    min-height: 100%;
}

/* Ensure form controls are responsive */
.form-control, .form-select, .btn {
    font-size: 0.9rem;
}

/* Nav improvements */
.nav-link {
    white-space: nowrap;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.nav-scroll-container .nav-link.active {
    background-color: #0d6efd;
    color: white !important;
    border-radius: 0.25rem;
}

.nav-link-plan {
    background-color: #ffc107;
    color: #000;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
}

.nav-link-plan:hover {
    background-color: #ffca2c;
    color: #000;
}
.scroll-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}
.wide-toolbar-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 10px 0; 
}

/* Mobile: overflow-x:auto containers with min-width:max-content children
   can get sized by their scrolling content instead of the parent's width
   on some mobile browsers. Force these to fill the viewport. */
@media (max-width: 767px) {
    .scroll-container,
    .nav-scroll-container,
    .wide-toolbar-container,
    .scroll-section,
    .scroll-content,
    .section-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Keep the toolbar pinned in place and let the diagram scroll
       (both directions) in its own region below it. */
    html, body {
        height: 100%;
        margin: 0;
        overflow: hidden;
    }

    body {
        display: flex;
        flex-direction: column;
    }

    .container.ui {
        flex: 0 0 auto;
        max-height: 55vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Wrapper around #diagram-section (the d-flex div right after the
       fullscreen button) becomes the independently scrolling diagram pane.
       It already carries Bootstrap's align-items-center class; combined with
       overflow:auto that clips anything taller than the pane at the top
       (classic flex centering + overflow bug — the "safe" keyword isn't
       reliably supported, so use auto margins on the child instead, which
       center it when there's room and collapse to 0 / top-align + fully
       scroll when there isn't). */
    body > .d-flex {
        flex: 1 1 auto;
        min-height: 0; /* required for a flex child to scroll instead of overflow the page */
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        align-items: flex-start !important;
    }

    body > .d-flex > #diagram-section {
        margin-top: auto;
        margin-bottom: auto;
    }

    /* Guaranteed-visible sizing, independent of any JS width measurement
       or resize timing: the SVG's viewBox (see drawSankey in
       sankeybuilder.js) is pinned to its native size, so simply capping
       width here makes the browser scale the whole diagram down to fit
       proportionally, rather than clipping it. Excluded from fullscreen
       (its own centering/scrolling scheme) and from .sankey-zoomed (once
       scroll-wheel zoom is active, it needs its own real pixel
       width/height instead of being forced back down to fit). */
    #diagram-section:not(.fullscreen-mode) .sankey-container:not(.sankey-zoomed) #sankey {
        width: 100% !important;
        height: auto !important;
    }
    #diagram-section:not(.fullscreen-mode) .sankey-container:not(.sankey-zoomed) #sankey svg {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        transform: none !important;
    }

    /* Same guarantee for fullscreen (the embed view auto-enters this) --
       cap the SVG to the viewport in both directions, letting its viewBox
       scale it down proportionally to fit rather than overflowing. Also
       excluded once scroll-zoomed, same reasoning as above. */
    #diagram-section.fullscreen-mode .sankey-container:not(.sankey-zoomed) #sankey svg {
        width: auto !important;
        height: auto !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        transform: none !important;
    }
}
.toolbar-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.5rem;
    min-width: max-content;
    padding: 0 1rem;
}

.toolbar-section {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 38px;
}


.toolbar-btn {
    white-space: nowrap;
    min-width: 100px;
}  

.node rect {
    fill-opacity: 0.9;
    shape-rendering: crispEdges;
    stroke: #000;
    stroke-width: 1.5px;
    cursor: move;
}

.node text {
    pointer-events: none;
    text-shadow: 0 1px 0 #fff;
}

/* ---------------------------------------------------------------------
   Dark Mode (Layout tab, next to Scroll Zoom)
   Vars + the dark-mode-canvas flag live on <html>/<body> rather than on
   #diagramScrollPane or #sankey directly: in fullscreen, #diagram-section
   (see .fullscreen-mode below) becomes its own position:fixed, full-
   viewport box with a hardcoded white background — it's no longer
   visually "inside" #diagramScrollPane at all, just still its DOM
   descendant. A body-level class lets one flag reach every one of these
   separately-backgrounded pieces (the scroll pane, the fullscreen
   overlay, and its pinned paging header row) instead of just whichever
   box happens to be visible outside fullscreen.

   Label <text> elements are drawn with fill:inherit (see
   createLabelText()/createCombinedLabelText() in sankeybuilder.js), so
   setting --diagram-text-color on body is enough to recolor every label
   via normal DOM inheritance — that still works fine even inside the
   fixed-position fullscreen overlay, since CSS inheritance follows the
   DOM tree, not layout/positioning. */
body {
    --diagram-text-color: #000000;
    --diagram-text-muted: #666666;
}

#sankey svg {
    fill: var(--diagram-text-color);
}

/* Backstop: if the fixed .fullscreen-mode box ever falls short of the
   true visible viewport (stale 100vh behind a mobile toolbar, an outer
   page/iframe taller than the box, etc.), whatever's behind it is html/
   body themselves — keeping those the same gradient as the diagram
   canvas means the worst case is an on-brand dark sliver, never a flat
   black one or a white one. background-attachment:fixed anchors the
   gradient to the viewport rather than stretching/repeating across
   html/body's full (possibly much taller than one screen) content
   height. */
html.dark-mode-canvas,
body.dark-mode-canvas {
    background: #05070f radial-gradient(ellipse at top, #101c34 0%, #0a1120 60%, #05070f 100%) !important;
    background-attachment: fixed !important;
}

/* Dark Mode is a DIAGRAM CANVAS feature, not a whole-app theme — the
   tab bar (Layout/Labels/Flow/Node/Data) and each tab's own horizontal
   toolbar row of controls sit on top of body, so without this they'd
   inherit body's new dark background too. Force them back to the
   normal light UI regardless of Dark Mode. */
body.dark-mode-canvas .container.ui {
    background: #fff !important;
}

body.dark-mode-canvas #diagramScrollPane,
body.dark-mode-canvas .fullscreen-mode {
    background: #05070f radial-gradient(ellipse at top, #101c34 0%, #0a1120 60%, #05070f 100%) !important;
    transition: background 0.25s ease;
}

/* Transparent (not their own flat color) in dark mode: #viewerPagingBar
   is only actually painted white via .fullscreen-mode #viewerPagingBar
   below when paging is enabled and visible — transparent here lets the
   parent .fullscreen-mode gradient show straight through it instead of
   a separate flat-colored bar creating a seam. */
body.dark-mode-canvas #viewerPagingBar {
    background: transparent !important;
}

body.dark-mode-canvas .node text {
    text-shadow: 0 0 6px currentColor, 0 1px 2px rgba(0, 0, 0, 0.9);
}

body.dark-mode-canvas .app-footer-toolbar,
body.dark-mode-canvas .fullscreen-btn {
    background: rgba(10, 17, 32, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode-canvas .footer-toolbar-btn {
    color: var(--diagram-text-color, #39ff14) !important;
}

.link {
    fill: none;
    stroke-opacity: 0.3;
}

.link:hover {
    stroke-opacity: 0.6;
}

/* Click-to-highlight (see highlightConnectedFlows in sankeybuilder.js):
   everything not connected to the clicked node washes out to near-white so
   the connected flows/nodes stand out clearly. */
.link.flow-dimmed {
    stroke: #ffffff !important;
    stroke-opacity: 0.45 !important;
}

.link.flow-highlighted {
    stroke-opacity: 0.5 !important;
}

.node.node-dimmed rect {
    fill: #ffffff !important;
    stroke: #ffffff !important;
    fill-opacity: 0.45 !important;
    stroke-opacity: 0.2 !important;
}

.node.node-dimmed .node-label {
    opacity: 0.3;
}

#sankey.diagram-highlighting .link {
    marker-end: none !important;
}

.sankey-container { 
    margin: 0 auto;
    padding-left: 0 !important;
    width: 100%;
    min-height: 400px; /* Changed from height to min-height */
    height: auto; /* Allow dynamic height */
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

#sankey {
    width: auto;
    height: auto;
    min-height: 400px; /* Ensure minimum height */
    margin: auto; /* centers when there's room, collapses to 0 (top/left-aligned, fully scrollable) when content overflows */
    overflow: hidden;
}

.app-footer-toolbar,
.fullscreen-btn {
    position: fixed;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #dee2e6;
    border-radius: 999px;
    padding: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.footer-toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #0d6efd;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.footer-toolbar-btn:hover {
    background: #e9ecef;
}

.footer-toolbar-btn:active {
    background: #dbe4ff;
}

.flow-info {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    font-size: 12px;
    pointer-events: none;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
    z-index: 10000;
}

.upload-area {
    padding: 8px 20px;
    text-align: center;
    margin-bottom: 0;
}

.data-table-container {
    max-height: 100px;
    overflow: auto;
}

.table th {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 10;
}

.column-selector {
    margin-bottom: 15px;
}

.card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#diagram-section {
    display: none;
}

/* Fullscreen mode */
.fullscreen-mode {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important; /* modern browsers: true visible viewport, not the stale 100vh some browsers keep behind a toolbar/URL bar */
    background: white !important;
    z-index: 9999 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

#viewerPagingBar {
    padding-top: 8px;
}

.fullscreen-mode #viewerPagingBar {
    flex: 0 0 auto;
    background: white;
}

/* .container{
    overflow: auto !important;
} */



.fullscreen-mode .row {
    padding-left: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.col-12{ padding-left: 0 !important;}

.fullscreen-mode .col-12 {
    padding: 0 !important;
    max-width: 100% !important;
}

.fullscreen-mode .sankey-container {
    flex: 1 1 auto;
    min-height: 0; /* required for a flex child to be allowed to shrink and scroll internally instead of overflowing */
    height: auto;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: auto !important; /* Enable scrolling on the container */
    display: grid !important;
    place-items: center !important;
}
.fullscreen-mode .sankey-container:not(.sankey-zoomed) {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* old Edge/IE */
}
.fullscreen-mode .sankey-container:not(.sankey-zoomed)::-webkit-scrollbar {
    /* A visible scrollbar reserves width on one side only, which skews
       centering asymmetrically — and whether Chromium actually shows one
       at any given moment depends on whether the diagram happens to be
       just barely taller than the viewport, so it isn't even consistent
       between reloads, let alone between browsers/settings that differ in
       overlay vs. classic scrollbar behavior. Hidden here since
       wheel/touch/keyboard scrolling still works without it. Once scroll-
       zoomed in (.sankey-zoomed), the scrollbar is shown again on purpose —
       it's the visible/draggable cue that there's more to pan to. */
    display: none;
    width: 0;
    height: 0;
}

.fullscreen-mode #sankey {
    width: auto !important;
    height: auto !important;
}

.fullscreen-mode .controls-section {
    display: none;
}

.container {
    max-width: 100% !important;
}
.modal{
    z-index: 9999 !important
}


/* Diagrams div-table (My Diagrams modal) */
.diagrams-table {
    display: flex;
    flex-direction: column;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}

.diagrams-table-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f0f0f0;
    background: white;
    transition: background 0.15s ease;
}

.diagrams-table-row:last-child {
    border-bottom: none;
}

.diagrams-table-row:hover {
    background: #f8f9fa;
}

.diagram-row-btn {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.diagram-row-btn.btn-edit {
    color: #0d6efd;
}
.diagram-row-btn.btn-edit:hover {
    background: #e7f1ff;
}

.diagram-row-btn.btn-share {
    color: #1e7e34;
}
.diagram-row-btn.btn-share:hover {
    background: #e7f6ec;
}

.diagram-row-btn.btn-delete {
    color: #dc3545;
}
.diagram-row-btn.btn-delete:hover {
    background: #fde2e2;
}

.diagram-row-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    white-space: nowrap;
}

.diagram-row-badge.badge-linked {
    background: #e7f6ec;
    color: #1e7e34;
}

.diagram-row-badge.badge-data {
    background: #e3f2fd;
    color: #0d6efd;
}

.diagram-row-badge.badge-expired {
    background: #fde2e2;
    color: #dc3545;
}

.diagram-row-name {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #1e293b;
    background: transparent;
}

.diagram-row-name:hover {
    border-color: #dee2e6;
}

.diagram-row-name:focus {
    outline: none;
    border-color: #0d6efd;
    background: white;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}

.diagram-row-name.just-saved {
    background: #e7f6ec;
    border-color: #1e7e34;
}

@media (max-width: 480px) {
    .diagram-row-badge span.badge-text {
        display: none;
    }
}

/* Loading state */
#diagramsLoading {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* The "Load" control on the Data tab is a <label> styled as a button (so
   it can trigger a hidden file input), which means the native `disabled`
   attribute on a <button> doesn't apply to it — this covers that case when
   a linked/API diagram is open, where Save/Load don't apply. */
.loadConfig.disabled-label {
    pointer-events: none;
    opacity: 0.5;
}

/* Insights modal */
.ai-insight-card {
    border: 1px solid #e9ecef;
    border-left: 4px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.6rem;
    background: #fff;
}
.ai-insight-card:last-child {
    margin-bottom: 0;
}
.ai-insight-card.ai-sev-red    { border-left-color: #dc2626; }
.ai-insight-card.ai-sev-yellow { border-left-color: #d97706; }
.ai-insight-card.ai-sev-green  { border-left-color: #94a3b8; }
.ai-insight-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0.4rem;
}
.ai-insight-left {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.ai-insight-number {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}
.ai-insight-category {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-severity-pill {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    border-radius: 20px;
    padding: 0 0.55rem;
    white-space: nowrap;
}
.ai-sevpill-red    { background: #fee2e2; color: #b91c1c; }
.ai-sevpill-yellow { background: #fef3c7; color: #92400e; }
.ai-sevpill-green  { background: #e5e7eb; color: #111827; }
.ai-insight-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}
.ai-insight-text {
    font-size: 0.88rem;
    color: #333;
    line-height: 1.4;
}
.ai-hypothesis {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 0.6rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}
.ai-hypothesis i {
    color: #d97706;
    font-size: 0.85rem;
    margin-top: 2px;
    flex: none;
}
.ai-hypothesis > div {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.ai-hypothesis span {
    font-size: 0.85rem;
    line-height: 1.45;
    color: #78350f;
}
.ai-hypothesis strong {
    color: #78350f;
}
.ai-confidence {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
}
.ai-conf-high   { background: #d1fae5; color: #065f46; }
.ai-conf-medium { background: #fef3c7; color: #92400e; }
.ai-conf-low    { background: #fee2e2; color: #b91c1c; }

/* Priority Matrix */
.ai-priority-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #e9ecef;
    border-left: 4px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.6rem;
    background: #fff;
}
.ai-priority-row:last-child { margin-bottom: 0; }
.ai-priority-row.ai-ptier-high     { border-left-color: #ea580c; }
.ai-priority-row.ai-ptier-medium   { border-left-color: #d97706; }
.ai-priority-row.ai-ptier-low      { border-left-color: #94a3b8; }
.ai-priority-row.ai-ptier-investigate { border-left-color: #4f46e5; }
.ai-priority-rank {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #212529;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    margin-top: 1px;
}
.ai-priority-body { flex: 1; min-width: 0; }
.ai-priority-top {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}
.ai-priority-tier-badge {
    flex: none;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.5rem;
    border-radius: 20px;
}
.ai-ptierbadge-high     { background: #ffedd5; color: #9a3412; }
.ai-ptierbadge-medium   { background: #fef3c7; color: #92400e; }
.ai-ptierbadge-low      { background: #e5e7eb; color: #374151; }
.ai-ptierbadge-investigate { background: #e0e7ff; color: #3730a3; }
.ai-priority-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #212529;
}
.ai-priority-meta {
    display: flex;
    gap: 0.9rem;
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.3rem;
}
.ai-priority-action {
    font-size: 0.85rem;
    line-height: 1.45;
    color: #333;
}
.ai-priority-action strong {
    color: #212529;
}
.ai-priority-riskscore {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    margin-bottom: 0.4rem;
    font-variant-numeric: tabular-nums;
}
.ai-priority-riskscore strong {
    color: #0f172a;
}
.ai-priority-riskscore.ai-riskscore-na {
    color: #94a3b8;
    background: #f8fafc;
    font-weight: 500;
    font-style: italic;
}
.ai-priority-normscore {
    color: #94a3b8;
    font-weight: 500;
}
.ai-quicksummary {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}
.ai-quicksummary-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475569;
    margin-bottom: 0.6rem;
}
.ai-quicksummary-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.7rem;
    font-size: 0.8rem;
}
.ai-quicksummary-table th {
    text-align: left;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 0 0.5rem 0.35rem 0;
    border-bottom: 1px solid #e2e8f0;
}
.ai-quicksummary-table td {
    padding: 0.3rem 0.5rem 0.3rem 0;
    color: #1e293b;
    border-bottom: 1px solid #eef2f7;
    font-variant-numeric: tabular-nums;
}
.ai-quicksummary-table tr:last-child td {
    border-bottom: none;
}
.ai-quicksummary-rec {
    font-size: 0.82rem;
    line-height: 1.5;
    color: #1e293b;
}
.ai-quicksummary-rec strong {
    color: #0f172a;
}
.ai-loophealth {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}
.ai-loophealth-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475569;
}
.ai-loophealth-sub {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 0.6rem;
}
.ai-loophealth-row {
    background: #fff;
    border: 1px solid #e9ecef;
    border-left: 4px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.5rem;
}
.ai-loophealth-row:last-child { margin-bottom: 0; }
.ai-loophealth-row.ai-loophealth-low    { border-left-color: #dc2626; }
.ai-loophealth-row.ai-loophealth-medium { border-left-color: #d97706; }
.ai-loophealth-row.ai-loophealth-high   { border-left-color: #16a34a; }
.ai-loophealth-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.25rem;
}
.ai-loophealth-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    font-size: 0.78rem;
    color: #495057;
    margin-bottom: 0.35rem;
}
.ai-loophealth-stats strong { color: #212529; }
.ai-loophealth-rec {
    font-size: 0.8rem;
    line-height: 1.45;
    color: #333;
}
.ai-loophealth-rec strong {
    color: #212529;
}
.ai-priority-tier-section {
    margin-bottom: 1rem;
}
.ai-priority-tier-section:last-child {
    margin-bottom: 0;
}
.ai-priority-tier-heading {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #e9ecef;
}
.ai-ptierheading-high     { color: #9a3412; }
.ai-ptierheading-medium   { color: #92400e; }
.ai-ptierheading-low      { color: #374151; }
.ai-ptierheading-investigate { color: #3730a3; }

.ai-priority-cluster {
    background: #f8fafc;
}
.ai-priority-sublist {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ai-priority-subitem {
    padding-left: 0.6rem;
    border-left: 2px solid #cbd5e1;
}
.ai-priority-subtitle {
    font-size: 0.8rem;
    font-weight: 700;
    color: #212529;
}
.ai-priority-subimpact {
    font-size: 0.72rem;
    font-weight: 700;
    color: #6c757d;
    margin-left: 6px;
}
.ai-priority-subaction {
    font-size: 0.78rem;
    line-height: 1.4;
    color: #495057;
    margin-top: 0.1rem;
}
/* Animate Arrows (Flow tab) — a changed flow's arrow(s) traveling from
   start to end of the path, via CSS motion-path. Stops at --arrow-travel-
   end (an absolute pixel length, set per-element in animateFlowArrows())
   rather than a flat 100% — 100% would put the arrow's own OFFSET-PATH
   ANCHOR exactly at the node edge, but the arrow's shape extends forward
   of that anchor, so its visible tip would overshoot into the node;
   --arrow-travel-end is pulled in by exactly that amount. The actual
   per-element duration is likewise set inline, since it depends on the
   current Highlight Changes setting. offset-rotate:auto (set inline
   alongside offset-path, also in that function) keeps each arrow
   pointing the direction it's currently traveling. */
@keyframes flowArrowTravel {
    from { offset-distance: 0; }
    to   { offset-distance: var(--arrow-travel-end, 100%); }
}
.flow-arrow-traveling {
    animation-name: flowArrowTravel;
    animation-timing-function: linear;
    opacity: 0.9;
    pointer-events: none;
}

/* Help modal search highlighting (see the Help section of
   sankey_builder.js) — all matches get the base highlight; whichever one
   prev/next navigation is currently on also gets .help-search-hit-active
   for a clearly distinguishable "you are here". */
mark.help-search-hit {
    background-color: #fff3a0;
    padding: 0 1px;
    border-radius: 2px;
}
mark.help-search-hit-active {
    background-color: #ffb347;
}
#helpContentModal h2 {
    margin-top: 1.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}
#helpContentModal h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}