/* annum-dag widget styles — extracted with the DAG view from the DCF app.
 * Class names keep their original .build-dag-* / .json-tree-* / .inspector-sidebar
 * hooks so existing consumers restyle nothing. A host page that also defines
 * .json-tree-* or .inspector-sidebar (e.g. for non-widget components) duplicates
 * identical rules — harmless. */

.build-dag-progress-mount {
    margin-bottom: 12px;
}

.build-dag-progress {
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    /* Establish a query container so the stage can stack the canvas + inspector
       based on the WIDGET's own width (it's embedded at many widths), not the viewport. */
    container-type: inline-size;
}

.build-dag-progress-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.build-dag-progress-title {
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}

.build-dag-progress-subtitle {
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
}

.build-dag-progress-counts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
}

.build-dag-progress-counts span {
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    padding: 3px 7px;
}

.build-dag-progress-counts .is-failed {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.build-dag-flow-host {
    height: 1230px;
}

/* At-rest variant on the company page: a contained, distinctly-shaded canvas
   with a bounded height so the page keeps gutter to scroll, instead of a
   full-bleed 820px stage. */
.build-dag-progress.is-resting .build-dag-flow-host {
    height: 510px;
    background: #eef2f8;
    border-top: 1px solid #dbe4ef;
    box-shadow: inset 0 1px 6px rgba(15, 23, 42, 0.06);
}

/* Canvas + hover explanation sidebar sit side by side. */
.build-dag-stage {
    display: flex;
    align-items: stretch;
}

.build-dag-stage .build-dag-flow-host {
    flex: 1 1 auto;
    min-width: 0;
}

/* When the widget is too narrow to seat the canvas beside the fixed-width inspector
   (366px aside would starve the canvas to ~0, parking the graph off-screen), stack
   them: canvas on top at full width, inspector below. */
@container (max-width: 640px) {
    .build-dag-stage {
        flex-direction: column;
    }
    .build-dag-stage .build-dag-aside {
        flex: 0 0 auto;
        border-left: none;
        border-top: 1px solid #dbe4ef;
    }
}

/* Shared base class for the sticky inspector sidebars rendered through the
   <InspectorSidebar> React component (build-DAG card + chart point panel).
   The two are intentionally styled differently today, so visual specifics stay
   on the per-adopter classes below; consolidate genuinely-shared rules here. */
.inspector-sidebar {}

.build-dag-aside {
    flex: 0 0 366px;
    border-top: 1px solid #dbe4ef;
    border-left: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 14px 16px;
    overflow-y: auto;
}

/* Prompt inspector: template / filled / result tabs + a code panel. */
.build-dag-prompt { margin-top: 13px; }

/* Vocabulary glossary in the default sidebar card — the terms anchored in context. */
.build-dag-glossary {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 3px 8px;
    font-size: 10.5px;
    line-height: 1.35;
}
.build-dag-glossary dt { color: #1d4ed8; font-weight: 700; }
.build-dag-glossary dd { margin: 0; color: #475569; }

.build-dag-prompt-tabs { display: flex; gap: 4px; margin-bottom: 8px; }

.build-dag-prompt-tab {
    flex: 1;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    border-radius: 6px;
    cursor: pointer;
}

/* Self-contained hover so a host page's global button:hover (e.g. a blue fill)
   can't leave dark text on a dark background. */
.build-dag-prompt-tab:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }

.build-dag-prompt-tab.is-active { background: #2563eb; border-color: #1d4ed8; color: #fff; }

.build-dag-prompt-tab.is-active:hover { background: #1d4ed8; color: #fff; }

.build-dag-prompt-tab.is-disabled { color: #cbd5e1; border-color: #e2e8f0; cursor: default; }

.build-dag-prompt-body {
    margin: 0;
    max-height: 240px;
    overflow: auto;
    background: #0f172a;
    color: #e2e8f0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    line-height: 1.45;
    padding: 10px 11px;
    border-radius: 8px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Raw provider data: one tab per source (reuses the prompt-tab styling above)
   + a scrollable JSON tree. The .json-tree-* nodes are styled globally. */
.build-dag-rawdata { margin-top: 13px; }

.build-dag-artifact-time {
    font-size: 10.5px;
    color: #64748b;
    margin: 6px 0;
}

.build-dag-rawdata-stale { color: #b45309; }

.build-dag-rawdata-body .json-tree-empty { color: #94a3b8; font-style: italic; }

.build-dag-rawdata-body {
    max-height: 300px;
    overflow: auto;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    /* Extra bottom padding so a horizontal scrollbar (the json-tree rows are
       white-space: nowrap and overflow when deeply expanded) sits in the gutter
       instead of obscuring the last line. */
    padding: 8px 10px 20px;
    font-size: 11px;
}

.build-dag-card-title {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
}

.build-dag-card-pin { margin-left: 6px; font-size: 12px; }

/* Pinned node (clicked) gets a selection ring (box-shadow follows the shape). */
.dag-node.is-pinned .build-dag-dot {
    box-shadow: 0 0 0 3px #2563eb, 0 1px 3px rgba(15, 23, 42, 0.16);
}

.dag-node.is-pinned .build-dag-group {
    box-shadow: 0 0 0 2.5px #2563eb;
}

.build-dag-card-chip {
    display: inline-block;
    margin-top: 9px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 9px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
}

.build-dag-card-chip.is-completed,
.build-dag-card-chip.is-skipped { background: #dcfce7; color: #166534; }

.build-dag-card-chip.is-running { background: #dbeafe; color: #1d4ed8; }

.build-dag-card-chip.is-failed  { background: #fee2e2; color: #b91c1c; }

.build-dag-card-timing {
    margin-top: 8px;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: #475569;
    font-weight: 600;
}

.build-dag-card-timing-est { color: #94a3b8; font-weight: 500; }

.build-dag-card-timing-over { color: #b45309; font-weight: 700; }

/* A step well past its estimate is the one worth looking at — amber it so
   "slow" is visually distinct from a wedged/hung graph. */
.build-dag-card-timing.is-over { color: #b45309; }

.build-dag-card-explain {
    margin: 11px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #334155;
    white-space: pre-wrap;
}

.build-dag-card-message {
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid #f1f5f9;
    font-size: 11px;
    line-height: 1.45;
    color: #64748b;
    white-space: pre-wrap;
}

.build-dag-legend {
    list-style: none;
    margin: 13px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 12px;
    color: #475569;
}

.build-dag-legend li { display: flex; align-items: center; gap: 9px; }

.build-dag-legend-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }

.build-dag-legend-dot.is-completed { background: #16a34a; }

.build-dag-legend-dot.is-running   { background: #0ea5e9; }

.build-dag-legend-dot.is-pending    { background: #cbd5e1; }

.build-dag-legend-dot.is-failed     { background: #dc2626; }

/* Each step is a circular dot: the ring around it is the progress bar (filled
   arc = --dag-ring%), status is the fill/ring color, a short badge names the
   step, and the native title attribute carries the full label on hover. */
.build-dag-dot {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--dag-ring-color) calc(var(--dag-ring, 0) * 1%), var(--dag-track-color) 0);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16);
    cursor: pointer;
    transition: transform 0.12s ease;
    --dag-ring-color: #cbd5e1;
    --dag-track-color: #e2e8f0;
    --dag-fill: #f8fafc;
    --dag-badge: #64748b;
}

.build-dag-dot::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--dag-fill);
}

.build-dag-dot:hover {
    transform: scale(1.09);
    z-index: 3;
}

.build-dag-dot-badge {
    position: relative;
    z-index: 1;
    max-width: 50px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    color: var(--dag-badge);
}

/* Elapsed time printed inside the dot — read run timing off the graph without
   opening the sidebar. Absolutely positioned along the bottom interior so it
   does NOT shift the badge: the main label stays centered in the node whether
   or not a time is shown (adding it to the grid flow top-packed the pair).
   Amber when the node ran past its estimate, matching the sidebar's over-flag. */
.build-dag-dot-time {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 9px;
    z-index: 1;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #94a3b8;
}

.build-dag-dot-time.is-over { color: #b45309; }

.build-dag-dot.is-running {
    --dag-ring-color: #0ea5e9;
    --dag-track-color: #e0f2fe;
    --dag-fill: #f0f9ff;
    --dag-badge: #075985;
    animation: build-dag-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes build-dag-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(14, 165, 233, 0); }
}

/* Indeterminate ring: no historical timing yet for this node type (Annum
   returns null expected_seconds on first run). Show a spinning arc instead of
   a fabricated fill — duration is honestly unknown until a run completes. */
.build-dag-dot.is-indeterminate {
    background: var(--dag-track-color);
}

.build-dag-dot.is-indeterminate::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--dag-ring-color) 0% 25%, transparent 25% 100%);
    animation: build-dag-dot-spin 0.9s linear infinite;
}

@keyframes build-dag-dot-spin {
    to { transform: rotate(360deg); }
}

.build-dag-dot.is-completed,
.build-dag-dot.is-skipped {
    --dag-ring-color: #16a34a;
    --dag-track-color: #dcfce7;
    --dag-fill: #f0fdf4;
    --dag-badge: #166534;
}

/* Static explanatory models have no execution status. Keep their nodes neutral
   instead of presenting every concept as a completed task. */
.build-dag-progress.is-model .build-dag-dot.is-completed {
    --dag-ring-color: #2563eb;
    --dag-track-color: #dbeafe;
    --dag-fill: #eff6ff;
    --dag-badge: #1e40af;
}

.build-dag-progress.is-model .build-dag-card-chip.is-completed {
    color: #1e40af;
    border-color: #93c5fd;
    background: #eff6ff;
}

/* A path is an ordered explanation, not a canvas. Static model() calls whose
   graph has one root and no branches/joins use compact selectable cards. */
.annum-linear-model {
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    color: #0f172a;
    container-type: inline-size;
}

.annum-linear-model-header {
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.annum-linear-model-path {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
    overflow-x: auto;
}

.annum-linear-model-node {
    flex: 1 0 160px;
    min-width: 0;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    padding: 10px;
    outline: none;
    cursor: pointer;
    user-select: text;
}

.annum-linear-model-node:hover,
.annum-linear-model-node:focus-visible,
.annum-linear-model-node.is-selected {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.16);
}

.annum-linear-model-index {
    display: inline-block;
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
}

.annum-linear-model-node strong {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
}

.annum-linear-model-node p,
.annum-linear-model-detail p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.annum-linear-model-arrow {
    align-self: center;
    color: #3b82f6;
    font-size: 16px;
}

.annum-linear-model-detail {
    display: grid;
    grid-template-columns: minmax(150px, .6fr) repeat(3, 1fr);
    gap: 12px;
    padding: 11px 14px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.annum-linear-model-detail span,
.annum-linear-model-detail b {
    display: block;
    margin-bottom: 3px;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.annum-linear-model-detail strong {
    display: block;
    font-size: 13px;
}

@container (max-width: 640px) {
    .annum-linear-model-path {
        flex-direction: column;
    }
    .annum-linear-model-arrow {
        transform: rotate(90deg);
    }
    .annum-linear-model-node {
        flex-basis: auto;
    }
    .annum-linear-model-detail {
        grid-template-columns: 1fr;
    }
}

.build-dag-dot.is-failed {
    --dag-ring-color: #dc2626;
    --dag-track-color: #fee2e2;
    --dag-fill: #fef2f2;
    --dag-badge: #991b1b;
}

/* The terminal save node is the outcome — give it a slightly heavier badge. */
.build-dag-dot-output .build-dag-dot-badge {
    font-size: 13px;
}

/* A collapsed fan-out sample: one node standing in for that sample's whole
   subgraph. The offset "stacked card" shadows behind it signal it holds several
   steps and opens on click. Aggregate status (running/done/failed) still colors
   the ring via the shared is-* rules. */
.build-dag-dot-group::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: -1;
    box-shadow:
        4px 4px 0 -2px var(--dag-track-color),
        4px 4px 0 -1px rgba(15, 23, 42, 0.12),
        8px 8px 0 -4px var(--dag-track-color),
        8px 8px 0 -3px rgba(15, 23, 42, 0.10);
}

/* Phase group containers (Inputs, each Run) hold their step dots; the box color
   aggregates the children's status. */
.build-dag-group {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
}

.build-dag-group-label {
    position: absolute;
    top: 6px;
    left: 13px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}

.build-dag-group.is-running {
    border-color: #7dd3fc;
    background: #f0f9ff;
}

.build-dag-group.is-running .build-dag-group-label { color: #075985; }

.build-dag-group.is-completed,
.build-dag-group.is-skipped {
    border-color: #86efac;
    background: #f0fdf4;
}

.build-dag-group.is-completed .build-dag-group-label { color: #166534; }

.build-dag-group.is-failed {
    border-color: #fca5a5;
    background: #fef2f2;
}

.build-dag-group.is-failed .build-dag-group-label { color: #991b1b; }

.json-tree-loading {
    color: #475569;
    font-size: 12px;
}

.json-tree-node {
    margin: 0;
}

.json-tree-node summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    list-style: none;
    font-size: 11px;
    color: #334155;
    margin: 0;
    line-height: 1.2;
    padding: 2px 6px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    user-select: none;
}

.json-tree-node summary::-webkit-details-marker {
    display: none;
}

.json-tree-node summary::before {
    content: '▶';
    color: #475569;
    font-size: 9px;
    line-height: 1;
}

.json-tree-node[open] > summary::before {
    content: '▼';
}

.json-tree-node summary:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}

.json-tree-children {
    margin: 4px 0 0 10px;
    padding-left: 8px;
    border-left: 1px solid #e2e8f0;
}

.json-tree-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
}

.json-tree-key {
    color: #7c3aed;
    font-weight: 700;
    flex: 0 0 auto;
    font-size: 11px;
}

.json-tree-value {
    flex: 0 0 auto;
    min-width: max-content;
}

.json-tree-token {
    font-size: 11px;
}

.json-tree-preview {
    color: #0f766e;
    font-weight: 700;
}

.json-tree-string {
    color: #166534;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* A long string collapses to a clickable preview (.json-tree-longstring is the
   <details>); the expanded body wraps and scrolls instead of forcing one line. */
.json-tree-longstring > summary { max-width: 100%; }
.json-tree-longstring-full {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 44ch;
    max-height: 14em;
    overflow-y: auto;
    margin: 5px 0 0 4px;
    padding: 6px 9px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #2563eb;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.5;
    color: #334155;
}

.json-tree-number {
    color: #1d4ed8;
}

.json-tree-boolean {
    color: #b45309;
}

.json-tree-null {
    color: #64748b;
}