/* L10.21 Causal River viewer styles. Sophia amber accents on top of
   project's primary palette. The viewer mounts inside a regular modal
   so we just style the content inside. */

.cr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.cr-header h3 {
    margin: 0;
    flex: 1;
    font-size: 16px;
}
.cr-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cr-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary, #555);
    cursor: pointer;
    user-select: none;
}
.cr-toggle input { margin: 0; }

/* L10.34.1 — KG viewer wants more real estate than the default modal.
   Default .modal is 90%/520px max — too narrow for 53-node Lake +
   drill panel. Override via :has() so only KG modal grows. */
.modal:has(.cr-modal-body) {
    width: 95vw;
    max-width: min(95vw, 1500px);
    max-height: 94vh;
    height: 94vh;
}

.cr-modal-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px 12px 12px;
    height: calc(94vh - 70px);
    box-sizing: border-box;
}

.cr-stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-tertiary, #777);
    padding: 4px 8px;
    background: var(--bg-elevated, #f7f7f7);
    border-radius: 6px;
    border-left: 3px solid #1e6fb8;
}
.cr-stat { font-weight: 500; }
.cr-stat:nth-child(1) { color: #1e6fb8; font-weight: 700; }

.cr-canvas-wrap {
    display: flex;
    flex: 1;
    gap: 8px;
    min-height: 0; /* allow flex shrink so cytoscape canvas sizes correctly */
}
.cr-canvas {
    flex: 1;
    min-width: 0;
    background:
        linear-gradient(180deg,
          rgba(176, 217, 232, 0.20) 0%,        /* upstream sky */
          rgba(176, 217, 232, 0.10) 25%,
          rgba(255, 255, 255, 0.00) 35%,
          rgba(255, 255, 255, 0.00) 65%,
          rgba(212, 162, 58, 0.06) 75%,        /* downstream warmth */
          rgba(201, 58, 50, 0.05) 100%
        );
    border: 1px solid var(--border, #e1e1e3);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.cr-drill {
    width: 320px;
    flex-shrink: 0;
    background: var(--bg-elevated, #f8f9fa);
    border: 1px solid var(--border, #e1e1e3);
    border-radius: 8px;
    padding: 10px 12px;
    overflow-y: auto;
    font-size: 12.5px;
    color: var(--text-primary, #222);
}
.cr-drill:empty::before {
    content: attr(data-empty-hint);
    font-size: 11px;
    color: var(--text-tertiary, #999);
    font-style: italic;
}
.cr-drill__head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border, #e1e1e3);
}
.cr-drill__type {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #888;
}
.cr-drill__type--A { background: #1e6fb8; }
.cr-drill__type--E { background: #2c8c5d; }
.cr-drill__type--F { background: #a14b1a; }
.cr-drill__type--B { background: #3aa55c; }
.cr-drill__type--C { background: #c93a32; }
.cr-drill__type--other { background: #888; }
.cr-drill__rwos {
    color: #d4a23a;
    font-size: 11px;
    font-weight: 600;
}
/* L10.34 — drill panel: aliases + ontology badges */
.cr-drill__ontology {
    color: var(--text-tertiary, #888);
    font-size: 10.5px;
    font-style: italic;
    margin-left: 2px;
}
.cr-drill__aliases {
    margin: -4px 0 6px 0;
    color: var(--text-tertiary, #888);
    font-size: 11px;
    line-height: 1.45;
}
.cr-drill__aliases small { font-size: 11px; }
.cr-drill__lake {
    display: flex;
    gap: 12px;
    font-size: 11.5px;
    color: var(--text-secondary, #555);
    margin-bottom: 6px;
}
.cr-drill__lake span:first-child { color: #1e6fb8; }
.cr-drill__lake span:last-child { color: #d4a23a; }
.cr-drill__desc {
    margin: 6px 0 8px 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-primary, #222);
}
.cr-drill__ev {
    margin: 6px 0;
    font-size: 11.5px;
}
.cr-drill__cardlink {
    color: #1e6fb8;
    text-decoration: none;
    margin-right: 4px;
}
.cr-drill__cardlink:hover { text-decoration: underline; }
.cr-drill__edges {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    border-top: 1px solid var(--border, #e1e1e3);
    padding-top: 6px;
}
.cr-drill__edge {
    padding: 5px 0;
    border-bottom: 1px dashed var(--border, #f0f0f0);
    font-size: 11.5px;
}
.cr-drill__edge:last-child { border-bottom: none; }
.cr-drill__rel {
    color: var(--text-tertiary, #888);
    font-family: ui-monospace, monospace;
    font-size: 10.5px;
    margin-right: 6px;
}
.cr-drill__other {
    color: var(--text-primary, #222);
    font-weight: 500;
}
.cr-drill__edge small {
    display: block;
    color: var(--text-tertiary, #888);
    font-style: italic;
    margin-top: 2px;
}

.cr-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary, #555);
}
.cr-empty p { margin: 0 0 14px 0; }

.cr-error {
    padding: 24px;
    color: var(--danger, #b52626);
    text-align: center;
}

/* Library card badge — KG done */
.library-kg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(30, 111, 184, 0.10);
    color: #1e6fb8;
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease;
}
.library-kg-badge:hover {
    background: rgba(30, 111, 184, 0.20);
}

@media (max-width: 900px) {
    .cr-canvas-wrap { flex-direction: column; }
    .cr-drill { width: auto; max-height: 200px; }
}

/* L10.29 — viewer filter controls (type chips, strength slider, search) */
.cr-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-elevated, #f7f7f7);
    border-radius: 6px;
    font-size: 11px;
}
.cr-controls__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.cr-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--border, #d0d0d4);
    background: var(--bg-elevated, #f5f5f7);
    color: var(--text-secondary, #555);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.cr-chip:hover { border-color: var(--text-secondary, #888); }
.cr-chip__n {
    font-size: 10px;
    color: var(--text-tertiary, #999);
    font-variant-numeric: tabular-nums;
}
.cr-chip--on {
    background: rgba(30, 111, 184, 0.10);
    border-color: #1e6fb8;
    color: #1e6fb8;
    font-weight: 600;
}
.cr-chip--on .cr-chip__n { color: #1e6fb8; }
.cr-chip--a.cr-chip--on { border-color: #1e6fb8; }
.cr-chip--e.cr-chip--on { background: rgba(44, 140, 93, 0.10); border-color: #2c8c5d; color: #2c8c5d; }
.cr-chip--f.cr-chip--on { background: rgba(161, 75, 26, 0.10); border-color: #a14b1a; color: #a14b1a; }
.cr-chip--b.cr-chip--on { background: rgba(58, 165, 92, 0.10); border-color: #3aa55c; color: #3aa55c; }
.cr-chip--c.cr-chip--on { background: rgba(201, 58, 50, 0.10); border-color: #c93a32; color: #c93a32; }

.cr-controls__sliders {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cr-slider {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-tertiary, #888);
}
.cr-slider input[type=range] { width: 120px; }
.cr-slider b {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #222);
    min-width: 32px;
    text-align: right;
}
.cr-search {
    flex: 1;
    min-width: 140px;
    padding: 4px 8px;
    border: 1px solid var(--border, #d0d0d4);
    border-radius: 4px;
    font-size: 11.5px;
    background: white;
}
.cr-search:focus { outline: none; border-color: #1e6fb8; }