/* Investigation canvas (canvas.html). Same dark surface and red accent as the
   history page, laid out as a full-height workspace under the site header. */

:root {
    --cv-bg: #0a0a0b;
    --cv-surface: #0f0f11;
    --cv-surface-2: #141417;
    --cv-surface-3: #1b1b1f;
    --cv-border: rgba(255, 255, 255, 0.08);
    --cv-border-strong: rgba(255, 255, 255, 0.16);
    --cv-text: #f4f4f5;
    --cv-text-muted: #a1a1aa;
    --cv-text-dim: #71717a;
    --cv-red: #cf362d;
    --cv-red-soft: rgba(207, 54, 45, 0.14);
    --cv-green: #4ade80;
    --cv-amber: #f5d984;
    --cv-radius: 10px;
    --cv-header-h: 64px;
    --cv-left-w: 248px;
    --cv-right-w: 312px;
}

html.cv-page,
html.cv-page body {
    height: 100%;
    overflow: hidden;
    background: var(--cv-bg);
}

#cv-app {
    position: fixed;
    top: var(--cv-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: var(--cv-left-w) minmax(0, 1fr) var(--cv-right-w);
    color: var(--cv-text);
    font-family: var(--font-sans, 'Geist', system-ui, sans-serif);
    font-size: 13px;
    background: var(--cv-bg);
    border-top: 1px solid var(--cv-border);
}

#cv-app *,
#cv-app *::before,
#cv-app *::after {
    box-sizing: border-box;
}

#cv-app button,
#cv-app input,
#cv-app select,
#cv-app textarea {
    font: inherit;
    color: inherit;
}

#cv-app :focus-visible {
    outline: 2px solid var(--cv-red);
    outline-offset: 1px;
}

/* ------------------------------------------------------------------ panels */

.cv-panel {
    background: var(--cv-surface);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#cv-left {
    border-right: 1px solid var(--cv-border);
}

#cv-right {
    border-left: 1px solid var(--cv-border);
}

.cv-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 10px 0;
    border-bottom: 1px solid var(--cv-border);
}

.cv-tab {
    flex: 1;
    padding: 8px 0 10px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--cv-text-muted);
    cursor: pointer;
    font-weight: 500;
}

.cv-tab[aria-selected='true'] {
    color: var(--cv-text);
    border-bottom-color: var(--cv-red);
}

.cv-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    min-height: 0;
}

.cv-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cv-text-dim);
    margin: 14px 2px 8px;
}

.cv-section-title:first-child {
    margin-top: 2px;
}

/* Collapsible section: the summary looks like a section title plus a chevron. */
.cv-collapse > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.cv-collapse > summary::-webkit-details-marker {
    display: none;
}

.cv-collapse > summary::after {
    content: '';
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.cv-collapse[open] > summary::after {
    transform: rotate(45deg);
}

.cv-collapse > summary:hover {
    color: var(--cv-text-muted);
}

/* canvases list */
.cv-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cv-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 8px 9px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
}

.cv-list-item:hover {
    background: var(--cv-surface-2);
}

.cv-list-item[aria-current='true'] {
    background: var(--cv-surface-3);
    border-color: var(--cv-border-strong);
}

.cv-list-main {
    flex: 1;
    min-width: 0;
}

.cv-list-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-list-meta {
    color: var(--cv-text-dim);
    font-size: 11px;
    margin-top: 2px;
}

/* entity palette */
.cv-palette {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cv-palette-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 8px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    cursor: grab;
    text-align: left;
    min-height: 36px;
    font-size: 12.5px;
    line-height: 1.2;
}

.cv-palette-item .cv-search-tag {
    margin-left: auto;
    font-size: 10px;
    color: var(--cv-text-dim);
    border: 1px solid var(--cv-border);
    border-radius: 4px;
    padding: 1px 5px;
}

.cv-gen-providers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.cv-palette-item .cv-search-tag.soon {
    border-style: dashed;
}

.cv-palette-item:hover {
    border-color: var(--cv-border-strong);
    background: var(--cv-surface-3);
}

.cv-palette-item:active {
    cursor: grabbing;
}

/* "Online account" with the platform accounts folded under it */
.cv-palette-row {
    display: flex;
    align-items: stretch;
    gap: 2px;
}

.cv-palette-row .cv-palette-item {
    flex: 1;
    min-width: 0;
}

/* Info about each entry (#cv-type-tip) appears when the pointer rests on it,
   on keyboard focus, or on a long-press on touch screens (js/canvas.js). */
.cv-type-tip {
    position: fixed;
    z-index: 2000;
    width: 260px;
    padding: 10px 12px;
    border-radius: 9px;
    background: rgba(15, 15, 17, 0.98);
    border: 1px solid var(--cv-border-strong);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    color: var(--cv-text);
    font-size: 12px;
    line-height: 1.45;
    pointer-events: none;
}

.cv-type-tip[hidden] {
    display: none;
}

.cv-type-tip-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
}

.cv-type-tip-title .cv-ico {
    width: 22px;
    height: 22px;
}

.cv-type-tip-kind {
    margin: 4px 0 6px;
    color: var(--cv-text-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cv-type-tip p {
    margin: 0;
    color: var(--cv-text-muted);
}

.cv-palette-toggle {
    flex: none;
    width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--cv-text-dim);
    cursor: pointer;
}

.cv-palette-toggle:hover {
    border-color: var(--cv-border-strong);
    background: var(--cv-surface-3);
    color: inherit;
}

.cv-palette-toggle .cv-i {
    transition: transform 0.15s ease;
}

.cv-palette-toggle[aria-expanded='true'] .cv-i {
    transform: rotate(90deg);
}

.cv-palette-sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 4px 14px;
    padding-left: 6px;
    border-left: 1px solid var(--cv-border);
}

.cv-palette-sub[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .cv-palette-toggle .cv-i {
        transition: none;
    }
}

/* Icon wrapper made by iconEl() in canvas.js */
.cv-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    line-height: 0;
}

.cv-ico {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1.5px solid currentColor;
    background: rgba(255, 255, 255, 0.03);
}

.cv-ico svg {
    width: 14px;
    height: 14px;
}

.cv-hint-text {
    color: var(--cv-text-dim);
    font-size: 12px;
    line-height: 1.5;
}

/* Evidence of a link a lookup drew (edge inspector) */
.cv-ev {
    border: 1px solid var(--cv-border);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--cv-surface-2);
}

.cv-ev-row {
    display: flex;
    gap: 10px;
    font-size: 12px;
    line-height: 1.6;
}

.cv-ev-k {
    flex: 0 0 76px;
    color: var(--cv-text-dim);
}

.cv-ev-v {
    color: var(--cv-text);
    overflow-wrap: anywhere;
}

.cv-ev-confirmed {
    color: var(--cv-green);
}

.cv-ev-reported {
    color: var(--cv-amber);
}

.cv-ev-inferred {
    color: var(--cv-text-muted);
    font-style: italic;
}

.cv-ev .cv-hint-text {
    margin: 6px 0 0;
}

/* ------------------------------------------------------------------- stage */

#cv-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

#cv-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--cv-border);
    background: var(--cv-surface);
    flex-wrap: nowrap;
    min-height: 52px;
}

/* Icon tools in one quiet segmented strip each, instead of a row of boxed
   buttons; the names are in their tooltips. */
.cv-tools {
    flex: 0 0 auto;
    padding: 2px;
    border: 1px solid var(--cv-border);
    border-radius: 9px;
    background: var(--cv-surface-2);
}

.cv-tools .cv-btn.icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 7px;
}

.cv-tools .cv-sep {
    height: 18px;
    margin: 0 3px;
}

#cv-toolbar .cv-btn-label {
    display: none;
}

.cv-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.cv-sep {
    width: 1px;
    height: 22px;
    background: var(--cv-border);
    margin: 0 4px;
}

.cv-spacer {
    flex: 1;
}

#cv-name {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 14px;
    font-weight: 600;
    width: 160px;
    max-width: 32vw;
}

#cv-name:hover {
    border-color: var(--cv-border);
}

#cv-name:focus {
    border-color: var(--cv-border-strong);
    background: var(--cv-surface-2);
    outline: none;
}

/* Just the dot: green saved, amber saving, red failed — the words are in
   its tooltip. Only a failure also says so in text. */
#cv-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 0 4px;
    color: var(--cv-text-dim);
    font-size: 12px;
    white-space: nowrap;
}

#cv-save:not([data-state='error']) .txt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

#cv-save[data-state='error'] {
    color: var(--cv-red);
}

#cv-save .txt {
    overflow: hidden;
    text-overflow: ellipsis;
}


#cv-save .dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cv-green);
}

#cv-save[data-state='dirty'] .dot,
#cv-save[data-state='saving'] .dot {
    background: var(--cv-amber);
}

#cv-save[data-state='error'] .dot {
    background: var(--cv-red);
}

.cv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    min-width: 32px;
    padding: 0 10px;
    border-radius: 7px;
    border: 1px solid var(--cv-border);
    background: var(--cv-surface-2);
    color: var(--cv-text);
    cursor: pointer;
    white-space: nowrap;
    font-size: 12.5px;
}

.cv-btn:hover:not(:disabled) {
    background: var(--cv-surface-3);
    border-color: var(--cv-border-strong);
}

.cv-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.cv-btn.icon {
    padding: 0;
    width: 32px;
}

.cv-btn.ghost {
    background: transparent;
    border-color: transparent;
}

.cv-btn.ghost:hover:not(:disabled) {
    background: var(--cv-surface-2);
}

/* #cv-app sets `color: inherit` on every button; repeat the id so the
   button variants still win inside the app. */
.cv-btn.primary,
#cv-app .cv-btn.primary {
    background: #f4f4f5;
    color: #0a0a0b;
    border-color: #f4f4f5;
    font-weight: 600;
}

.cv-btn.primary:hover:not(:disabled),
#cv-app .cv-btn.primary:hover:not(:disabled) {
    background: #fff;
    color: #0a0a0b;
}

.cv-btn.danger {
    color: #f87171;
}

.cv-btn.accent {
    background: var(--cv-red);
    border-color: var(--cv-red);
    color: #fff;
    font-weight: 600;
}

.cv-btn.accent:hover:not(:disabled) {
    background: #e0453b;
    border-color: #e0453b;
}

.cv-btn[aria-pressed='true'] {
    background: var(--cv-red-soft);
    border-color: rgba(207, 54, 45, 0.6);
    color: #fff;
}

.cv-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.cv-input,
.cv-select,
.cv-textarea {
    width: 100%;
    background: var(--cv-surface-2);
    border: 1px solid var(--cv-border);
    border-radius: 7px;
    padding: 7px 9px;
    min-height: 32px;
}

.cv-input:focus,
.cv-select:focus,
.cv-textarea:focus {
    outline: none;
    border-color: var(--cv-border-strong);
    background: var(--cv-surface-3);
}

.cv-select {
    appearance: none;
    padding-right: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 14px;
}

.cv-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.45;
}

/* quick search in the toolbar */
#cv-quick {
    display: flex;
    flex: 1 1 300px;
    min-width: 240px;
    max-width: 440px;
    align-items: center;
    gap: 0;
    border: 1px solid var(--cv-border-strong);
    border-radius: 8px;
    background: var(--cv-surface-2);
    overflow: hidden;
    height: 34px;
}

#cv-quick select {
    border: 0;
    border-right: 1px solid var(--cv-border);
    border-radius: 0;
    background-color: transparent;
    width: auto;
    height: 100%;
    min-height: 0;
}

#cv-quick input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0 10px;
    height: 100%;
}

#cv-quick input:focus {
    outline: none;
}

#cv-quick input,
#cv-filter {
    font-weight: 400;
    color: var(--cv-text);
}

#cv-app input::placeholder,
#cv-app textarea::placeholder {
    color: var(--cv-text-dim);
    font-weight: 400;
    opacity: 1;
}

/* main.css absolutely positions every submit button (for the search pages). */
#cv-quick .cv-btn,
#cv-quick .cv-btn:hover {
    position: static;
    width: auto;
    transform: none;
    border-radius: 0;
    height: 100%;
    border: 0;
}

/* graph */
#cv-graph-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
}

#cv-graph {
    position: absolute;
    inset: 0;
    background-color: var(--cv-bg);
    background-image: radial-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px);
    background-size: 24px 24px;
}

#cv-graph.connect-mode {
    cursor: crosshair;
}

#cv-graph.dragover {
    box-shadow: inset 0 0 0 2px var(--cv-red);
}

.cv-float {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 9px;
    background: rgba(15, 15, 17, 0.92);
    border: 1px solid var(--cv-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#cv-zoom {
    right: 12px;
    bottom: 12px;
}

/* Fact cards under each entity. Sizes are in graph units: the layer is scaled
   with the zoom, exactly like the entity labels drawn by Cytoscape. */
#cv-cards {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.15s ease;
}

#cv-cards.hidden {
    opacity: 0;
}

#cv-cards-layer {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
}

.cv-card {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 84px;
    max-width: 220px;
    padding: 4px 7px;
    border-radius: 6px;
    background: rgba(17, 17, 20, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    font-family: var(--font-sans, 'Geist', system-ui, sans-serif);
}

.cv-card-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
    font-size: 9px;
    line-height: 12.5px;
}

.cv-card-row .k {
    flex-shrink: 0;
    max-width: 82px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #71717a;
}

/* "↗ github.com" under an entity: the one clickable part of the card layer. */
.cv-card-open {
    pointer-events: auto;
    align-self: flex-start;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #93c5fd;
    font-size: 10.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.cv-card-open:hover {
    text-decoration: underline;
}

.cv-card-row .v {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #e4e4e7;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.cv-card-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 2px;
}

.cv-flag {
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 7.5px;
    font-weight: 600;
    line-height: 10px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.cv-flag.high {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.cv-flag.medium {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
}

.cv-flag.low {
    background: rgba(96, 165, 250, 0.16);
    color: #93c5fd;
}

.cv-flag.info {
    background: rgba(161, 161, 170, 0.14);
    color: #d4d4d8;
}

.cv-hovercard .cv-card-flags {
    margin-bottom: 8px;
}

.cv-hovercard .cv-flag,
.cv-insp-flags .cv-flag {
    padding: 2px 6px;
    font-size: 10.5px;
    line-height: 14px;
}

.cv-insp-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

/* All of an entity's properties, on hover. */
.cv-hovercard {
    position: absolute;
    z-index: 6;
    max-width: 320px;
    padding: 10px 12px;
    border-radius: 9px;
    background: rgba(15, 15, 17, 0.97);
    border: 1px solid var(--cv-border-strong);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    font-size: 12px;
    /* Every property; long lists scroll inside the card. */
    max-height: min(360px, calc(100% - 16px));
    overflow-y: auto;
    overscroll-behavior: contain;
    cursor: default;
}

.cv-hovercard[hidden] {
    display: none;
}

.cv-hc-title {
    font-weight: 600;
    margin-bottom: 6px;
    overflow-wrap: anywhere;
}

.cv-hc-props {
    display: grid;
    /* One long name must not squeeze every value: names are capped. */
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    gap: 3px 10px;
    margin: 0;
}

.cv-hc-props dt {
    display: flex;
    max-width: 120px;
    color: var(--cv-text-dim);
    white-space: nowrap;
}

.cv-hc-props dt span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Outside the clipped text, so a cut name still ends in "…:". */
.cv-hc-props dt::after {
    content: ':';
}

.cv-hc-props dd {
    margin: 0;
    color: var(--cv-text);
    overflow-wrap: anywhere;
}

#cv-zoom-pct {
    min-width: 46px;
    text-align: center;
    color: var(--cv-text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}

#cv-filter-wrap {
    left: 12px;
    top: 12px;
}

#cv-right-toggle-wrap {
    right: 12px;
    top: 12px;
}

#cv-filter {
    width: 200px;
    border: 0;
    background: transparent;
    min-height: 28px;
    padding: 4px 6px;
}

#cv-filter:focus {
    outline: none;
}

#cv-filter-count {
    color: var(--cv-text-dim);
    font-size: 11px;
    padding-right: 6px;
    white-space: nowrap;
}

#cv-mode-banner {
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
    padding: 6px 8px 6px 12px;
    color: #fff;
    background: rgba(207, 54, 45, 0.9);
    border-color: rgba(255, 255, 255, 0.15);
    font-size: 12.5px;
    gap: 10px;
}

#cv-mode-banner[hidden],
#cv-empty[hidden],
#cv-gate[hidden],
#cv-minimap[hidden],
#cv-layout-panel[hidden] {
    display: none;
}

#cv-searches {
    left: 12px;
    bottom: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 6px;
    max-width: min(360px, calc(100% - 140px));
}

#cv-searches:empty {
    display: none;
}

.cv-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 6px;
    font-size: 12px;
}

.cv-search-row .label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-search-row .count {
    color: var(--cv-text-muted);
    font-variant-numeric: tabular-nums;
}

.cv-spinner {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--cv-red);
    animation: cv-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes cv-spin {
    to {
        transform: rotate(360deg);
    }
}

#cv-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    z-index: 2;
}

.cv-empty-card {
    pointer-events: auto;
    width: min(440px, calc(100% - 32px));
    text-align: center;
    padding: 28px 24px;
    border-radius: 14px;
    background: rgba(15, 15, 17, 0.9);
    border: 1px solid var(--cv-border);
}

.cv-empty-card h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px;
}

.cv-empty-card p {
    color: var(--cv-text-muted);
    margin: 0 0 16px;
    line-height: 1.5;
}

.cv-empty-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------- inspector */

.cv-insp-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--cv-border);
}

.cv-insp-head .cv-ico {
    width: 36px;
    height: 36px;
}

.cv-insp-head .cv-ico svg {
    width: 18px;
    height: 18px;
}

.cv-insp-title {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-insp-sub {
    color: var(--cv-text-dim);
    font-size: 11.5px;
    margin-top: 2px;
}

.cv-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.cv-field > label,
.cv-field > .cv-label {
    font-size: 11.5px;
    color: var(--cv-text-muted);
    font-weight: 500;
}

.cv-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.cv-row > * {
    min-width: 0;
}

.cv-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.cv-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.cv-swatch[aria-pressed='true'] {
    border-color: #fff;
}

.cv-swatch-custom {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--cv-border);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.cv-props {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cv-prop {
    display: grid;
    /* Names get a fixed, short column; values take the rest of the width. */
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 4px;
    align-items: start;
}

.cv-prop .cv-input {
    min-height: 28px;
    padding: 5px 7px;
    font-size: 12px;
}

/* Property name: a label capped with "…:", full name in its tooltip. It
   only looks like a field while hovered or being edited. */
.cv-prop-name {
    display: flex;
    align-items: center;
    min-width: 0;
}

.cv-prop-name::after {
    content: ':';
    color: var(--cv-text-dim);
    font-size: 12px;
    padding-left: 1px;
}

.cv-prop .cv-prop-key {
    flex: 1;
    min-width: 0;
    padding: 5px 2px 5px 4px;
    border-color: transparent;
    background: transparent;
    color: var(--cv-text-dim);
    text-overflow: ellipsis;
}

.cv-prop .cv-prop-key:hover {
    border-color: var(--cv-border);
}

.cv-prop .cv-prop-key:focus {
    color: var(--cv-text);
    text-overflow: clip;
}

.cv-prop textarea.cv-prop-value {
    resize: none;
    min-height: 28px;
    height: 28px;
    line-height: 1.35;
    overflow-wrap: break-word;
    overflow-y: auto;
}

/* With a mouse, the row's buttons appear over its right end while it is
   hovered, so values keep the full width. Touch keeps them in a column. */
@media (hover: hover) {
    .cv-prop {
        position: relative;
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .cv-prop-actions {
        position: absolute;
        top: 1px;
        right: 1px;
        border-radius: 6px;
        background: var(--cv-surface-3);
        box-shadow: -6px 0 8px var(--cv-surface-3);
        visibility: hidden;
    }

    .cv-prop:hover .cv-prop-actions,
    .cv-prop:focus-within .cv-prop-actions {
        visibility: visible;
    }
}

.cv-prop-actions {
    display: flex;
    gap: 0;
}

.cv-prop-actions .cv-btn {
    width: 26px;
    min-width: 26px;
    height: 28px;
}

.cv-prop-actions .cv-btn svg {
    width: 13px;
    height: 13px;
}

.cv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cv-run {
    width: 100%;
    height: 38px;
    margin-bottom: 8px;
}

.cv-meta {
    color: var(--cv-text-dim);
    font-size: 11.5px;
    line-height: 1.6;
}

.cv-meta a {
    color: var(--cv-text-muted);
    text-decoration: underline;
}

.cv-kbd {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    font-size: 12px;
    color: var(--cv-text-muted);
}

.cv-kbd kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--cv-surface-3);
    border: 1px solid var(--cv-border);
    color: var(--cv-text);
    white-space: nowrap;
}

.cv-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.cv-stat {
    padding: 10px;
    border-radius: 8px;
    background: var(--cv-surface-2);
    border: 1px solid var(--cv-border);
}

.cv-stat .v {
    font-size: 18px;
    font-weight: 600;
}

.cv-stat .l {
    color: var(--cv-text-dim);
    font-size: 11px;
}

/* ----------------------------------------------------------- menus/modals */

.cv-menu {
    position: fixed;
    z-index: 1200;
    min-width: 200px;
    padding: 5px;
    border-radius: 10px;
    background: #151518;
    border: 1px solid var(--cv-border-strong);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    color: var(--cv-text);
    font-size: 13px;
}

.cv-menu[hidden] {
    display: none;
}

.cv-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cv-menu button:hover,
.cv-menu button:focus-visible {
    background: var(--cv-surface-3);
    outline: none;
}

.cv-menu button .k {
    margin-left: auto;
    color: var(--cv-text-dim);
    font-size: 11px;
}

.cv-menu button svg {
    width: 15px;
    height: 15px;
    color: var(--cv-text-muted);
}

.cv-menu hr {
    border: 0;
    border-top: 1px solid var(--cv-border);
    margin: 5px 0;
}

.cv-menu.wide {
    width: 300px;
}

/* Long menus (Run action…) scroll inside, the filter box stays on top. */
.cv-menu-list {
    max-height: min(62vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cv-menu-filter {
    display: block;
    width: 100%;
    margin: 0 0 5px;
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid var(--cv-border-strong);
    background: var(--cv-surface);
    color: var(--cv-text);
    font: inherit;
    outline: none;
}

.cv-menu-filter:focus {
    border-color: var(--cv-red);
}

.cv-menu-heading {
    padding: 8px 10px 3px;
    color: var(--cv-text-dim);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cv-menu-heading[hidden],
.cv-menu button[hidden] {
    display: none;
}

.cv-menu-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cv-menu .danger {
    color: #f87171;
}

.cv-menu .danger svg {
    color: #f87171;
}

.cv-modal-back {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(0, 0, 0, 0.6);
    display: grid;
    place-items: center;
    padding: 16px;
}

.cv-modal-back[hidden] {
    display: none;
}

.cv-modal {
    width: min(440px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    border-radius: 14px;
    background: #121214;
    border: 1px solid var(--cv-border-strong);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    padding: 20px;
    color: var(--cv-text);
    font-size: 13px;
}

.cv-modal h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
}

.cv-modal p {
    color: var(--cv-text-muted);
    line-height: 1.5;
    margin: 0 0 14px;
}

.cv-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.cv-seg {
    display: flex;
    border: 1px solid var(--cv-border);
    border-radius: 8px;
    overflow: hidden;
}

.cv-seg button {
    flex: 1;
    padding: 7px 8px;
    background: var(--cv-surface-2);
    border: 0;
    border-right: 1px solid var(--cv-border);
    cursor: pointer;
    font-size: 12px;
}

.cv-seg button:last-child {
    border-right: 0;
}

.cv-seg button[aria-pressed='true'] {
    background: #f4f4f5;
    color: #0a0a0b;
    font-weight: 600;
}

.cv-check {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    color: var(--cv-text-muted);
    line-height: 1.45;
    cursor: pointer;
}

.cv-check input {
    margin-top: 3px;
    accent-color: var(--cv-red);
}

.cv-check a {
    color: var(--cv-text);
    text-decoration: underline;
}

#cv-toasts {
    position: fixed;
    z-index: 1400;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    pointer-events: none;
}

.cv-toast {
    pointer-events: auto;
    max-width: 360px;
    padding: 10px 14px;
    border-radius: 9px;
    background: #18181b;
    border: 1px solid var(--cv-border-strong);
    color: var(--cv-text);
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    animation: cv-toast-in 0.18s ease-out;
}

.cv-toast.error {
    border-color: rgba(248, 113, 113, 0.5);
}

.cv-toast a {
    color: #fff;
    text-decoration: underline;
}

@keyframes cv-toast-in {
    from {
        transform: translateY(6px);
        opacity: 0;
    }
}

/* signed-out gate */
#cv-gate {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(10, 10, 11, 0.15), rgba(10, 10, 11, 0.55));
    padding: 16px;
}

#cv-gate .cv-empty-card {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* Wide screens: the inspector column can be folded away. */
@media (min-width: 961px) {
    #cv-app.right-collapsed {
        grid-template-columns: var(--cv-left-w) minmax(0, 1fr) 0;
    }

    #cv-app.right-collapsed #cv-right {
        display: none;
    }
}

#cv-right-toggle[aria-expanded='false'] {
    color: var(--cv-text-muted);
}

/* drawer toggles only exist on narrow screens */
.cv-drawer-toggle {
    display: none;
}

.cv-panel-close {
    display: none;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1180px) {
    :root {
        --cv-left-w: 216px;
        --cv-right-w: 280px;
    }

    /* Too narrow for the search beside the tools: it gets its own row. */
    #cv-toolbar {
        flex-wrap: wrap;
    }

    #cv-quick {
        order: 10;
        max-width: none;
        flex-basis: 100%;
    }
}

@media (max-width: 960px) {
    #cv-app {
        grid-template-columns: minmax(0, 1fr);
    }

    #cv-left,
    #cv-right {
        position: fixed;
        top: var(--cv-header-h);
        bottom: 0;
        z-index: 1100;
        width: min(320px, 88vw);
        transition: transform 0.2s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
    }

    #cv-left {
        left: 0;
        transform: translateX(-105%);
    }

    #cv-right {
        right: 0;
        transform: translateX(105%);
    }

    #cv-app.left-open #cv-left,
    #cv-app.right-open #cv-right {
        transform: none;
    }

    .cv-drawer-toggle {
        display: inline-flex;
    }

    .cv-panel-close {
        display: inline-flex;
        margin-left: auto;
    }

    #cv-name {
        width: 140px;
    }

    .cv-hide-narrow {
        display: none !important;
    }
}

@media (max-width: 640px) {
    #cv-toolbar {
        gap: 4px;
        padding: 6px;
    }

    #cv-filter {
        width: 120px;
    }

    #cv-name {
        flex: 1 1 80px;
        min-width: 60px;
        width: auto;
    }

    #cv-searches {
        bottom: 60px;
        max-width: calc(100% - 24px);
    }

    .cv-hide-phone {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cv-spinner {
        animation-duration: 2.4s;
    }

    #cv-left,
    #cv-right,
    .cv-toast {
        transition: none;
        animation: none;
    }
}

/* The cookie pill would sit on the zoom controls; park it bottom-left. */
html.cv-page .cookie-consent {
    left: 12px;
    right: auto;
    bottom: 12px;
    justify-content: flex-start;
}

html.cv-page .cookie-panel {
    left: 0;
    right: auto;
}

/* Picture of an image entity in the inspector */
.cv-insp-picture {
    display: block;
    margin: 0 0 12px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--cv-border);
    background: var(--cv-surface);
}

.cv-insp-picture img {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: contain;
}

.cv-quick {
    flex-wrap: wrap;
    margin: 0 0 12px;
}

.cv-quick > .cv-btn {
    flex: 1 1 auto;
    justify-content: center;
}

/* Possible variations dialog */
.cv-var {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cv-modal:has(.cv-var) {
    width: min(520px, calc(100vw - 32px));
    max-width: none;
}

.cv-var-opts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cv-var-list {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--cv-border);
    border-radius: 8px;
    padding: 4px;
}

.cv-var-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.cv-var-row:hover {
    background: var(--cv-surface-3);
}

.cv-var-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cv-var-status {
    flex: none;
    font-size: 11.5px;
    font-weight: 600;
}

.cv-var-more,
.cv-var-count,
.cv-var-empty {
    margin: 0;
    color: var(--cv-text-dim);
    font-size: 12px;
}

/* ------------------------------------------------- big canvases: overview */

#cv-minimap {
    right: 12px;
    bottom: 58px;
    padding: 4px;
}

#cv-minimap canvas {
    display: block;
    width: 200px;
    height: 130px;
    border-radius: 6px;
    background: rgba(10, 10, 11, 0.85);
    cursor: crosshair;
    touch-action: none;
}

#cv-layout-panel {
    right: 12px;
    top: 56px;
    width: 290px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
    z-index: 7;
}

.cv-lp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cv-lp-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    font-size: 12px;
    color: var(--cv-text-muted);
}

.cv-lp-row input[type='range'] {
    grid-column: 1 / -1;
    width: 100%;
    accent-color: var(--cv-red);
}

.cv-lp-val {
    color: var(--cv-text);
    font-variant-numeric: tabular-nums;
}

#cv-lock[aria-pressed='true'],
#cv-focus[aria-pressed='true'],
#cv-map[aria-pressed='true'] {
    color: var(--cv-amber);
}

@media (max-width: 720px) {
    #cv-minimap {
        display: none;
    }

    #cv-layout-panel {
        left: 12px;
        right: 12px;
        width: auto;
    }
}

/* Arriving from the search box (search.html) cross-fades instead of flashing. */
@view-transition {
    navigation: auto;
}