/* Canvas board additions: a world that zooms and pans, prices on the nodes,
   uploads, and the saved-board drawer. Only /fly/canvas loads this file. */

/* The board itself stops scrolling, the world inside it moves instead */
.canvas-page .fly-cv-board { overflow: hidden; cursor: default; }
.canvas-page .fly-cv-board.panning { cursor: grabbing; }
.canvas-page .fly-cv-board.dropping { border-color: var(--fly-lime); }

.fly-cv-world {
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;
    transform-origin: 0 0;
    will-change: transform;
}
/* The wire sheet is far larger than any board anyone builds, so paths never clip */
/* max-width from the site reset would squeeze this sheet to the width of its
   zero-width parent, which leaves every wire drawn but clipped away */
.canvas-page .fly-cv-wires {
    position: absolute;
    inset: auto;
    top: 0; left: 0;
    width: 20000px;
    height: 20000px;
    max-width: none;
    max-height: none;
    overflow: visible;
}

.fly-cv-zoombar {
    position: absolute;
    left: 14px; bottom: 14px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--fly-line);
    border-radius: 12px;
    background: rgba(18,18,20,0.88);
    backdrop-filter: blur(8px);
    z-index: 5;
}
.fly-cv-zoombar button {
    border: 0;
    background: transparent;
    color: var(--fly-text);
    font: inherit;
    font-size: 15px;
    line-height: 1;
    width: 28px; height: 26px;
    border-radius: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.fly-cv-zoombar button:hover { background: rgba(255,255,255,0.1); }
.fly-cv-zoombar button svg { width: 14px; height: 14px; }
.fly-cv-zoombar span {
    min-width: 46px;
    text-align: center;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--fly-text);
}

/* Undo, redo, save, export */
.fly-cv-histrow { display: flex; gap: 6px; margin-bottom: 10px; }
.fly-cv-mini {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--fly-line);
    border-radius: 11px;
    background: var(--fly-card);
    color: var(--fly-text);
    font: inherit;
    font-size: 12px;
    padding: 8px 9px;
    cursor: pointer;
}
.fly-cv-mini:hover:not(:disabled) { border-color: rgba(255,255,255,0.3); }
.fly-cv-mini:disabled { opacity: 0.4; cursor: default; }
.fly-cv-mini svg { width: 13px; height: 13px; }

/* Saved boards */
.fly-cv-boards { display: flex; flex-direction: column; gap: 8px; }
.fly-cv-boards .fly-cv-histrow { margin-bottom: 0; }
.fly-cv-nameinput {
    background: #202024;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--fly-text);
    font: inherit;
    font-size: 13px;
    padding: 9px 10px;
    outline: none;
    box-shadow: inset 0 3px 0 rgba(0,0,0,0.45), inset 2px 2px 5px rgba(0,0,0,0.55);
}
.fly-cv-nameinput::placeholder { color: var(--fly-dim); }
.fly-cv-nameinput:focus { border-color: var(--fly-lime); }
.fly-cv-boardmsg {
    font-size: 12px;
    line-height: 1.45;
    color: var(--fly-text);
    border-left: 2px solid var(--fly-lime);
    padding-left: 9px;
}
.fly-cv-boardmsg.bad { border-left-color: #dc2626; }
.fly-cv-boardmsg[hidden] { display: none; }

/* What a node costs, sitting in its corner */
.fly-cv-price {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    color: var(--fly-dim);
    background: rgba(0,0,0,0.35);
    border-radius: 6px;
    padding: 1px 5px;
    pointer-events: none;
}
.fly-cv-node { padding-bottom: 24px; }
/* Wires answer the mouse even though the sheet they live on does not */
.canvas-page .fly-cv-wirehit {
    fill: none;
    stroke: transparent;
    stroke-width: 16;
    pointer-events: stroke;
    cursor: pointer;
}
.canvas-page .fly-cv-wire.picked { stroke: var(--fly-lime); stroke-width: 3; }
.canvas-page .fly-cv-in { cursor: grab; }

/* The card you are working on rides above the rest, so its dots stay grabbable */
.canvas-page .fly-cv-node.selected { z-index: 3; }
.canvas-page .fly-cv-node:hover { z-index: 2; }
/* A dot wider than it looks, because 13 pixels is a hard thing to hit */
.canvas-page .fly-cv-out::after {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 50%;
}

/* The picture a node carries from your disk */
.fly-cv-upbtn { width: 100%; justify-content: center; }
.fly-cv-uppreview {
    width: 100%;
    border-radius: 11px;
    display: block;
    border: 1px solid var(--fly-line);
}