/* The vector editor (Pages/Vector, js/vector-*.js). It borrows the photo editor's chrome — .pe-* — and adds what is
   specific to drawing: the SVG stage and its overlay, the inspector and the layers tree. */

.ve2-host { flex: 1; min-height: 0; display: flex; flex-direction: column; container-type: inline-size; }
.vx { --vx-accent: var(--rl-accent, #2f6df6); }
.vx .pe__panels { width: 20rem; }

/* ---- the stage ---- */
.vx-stage { background: var(--pe-work); }
.vx-view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; user-select: none; -webkit-user-select: none; }
.vx-shadow { fill: #000; opacity: .0; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .35)); }
.vx-paper { fill: #fff; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .3)); }
.vx-frame { stroke: rgba(0, 0, 0, .35); vector-effect: non-scaling-stroke; pointer-events: none; }
.vx-checker, .vx-gridrect { pointer-events: none; }
.vx-gridline { stroke: rgba(80, 100, 140, .28); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vx-doc { }

/* Outline view: every shape drawn as a hairline, which is what you want when judging the construction. */
.vx-outline .vx-doc * { fill: none !important; stroke: #1d6bff !important; stroke-width: 1px !important; vector-effect: non-scaling-stroke; opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; }
.vx-outline .vx-doc text { stroke: none !important; fill: #1d6bff !important; }

.vx-overlay { pointer-events: none; }
.vx-overlay * { pointer-events: none; }
.vx-overlay .vx-outline, .vx-overlay .vx-hov { fill: none; stroke: var(--vx-accent); stroke-width: 1.25; }
.vx-overlay .vx-hov { stroke-opacity: .55; stroke-width: 1; }
.vx-overlay .vx-frame-sel { fill: none; stroke: var(--vx-accent); stroke-width: 1; }
.vx-overlay .vx-h { fill: #fff; stroke: var(--vx-accent); stroke-width: 1.25; }
.vx-overlay .vx-h--pt { fill: #fff; stroke: #1b1f27; stroke-width: 1; }
.vx-overlay .vx-h--pt.is-sel { fill: var(--vx-accent); stroke: #fff; }
.vx-overlay .vx-h--ctl { fill: #fff; stroke: var(--vx-accent); }
.vx-overlay .vx-h--stop { stroke: #111; stroke-width: 1.5; }
.vx-overlay .vx-h--stop.is-sel { stroke: var(--vx-accent); stroke-width: 2.5; }
.vx-overlay .vx-rod { stroke: var(--vx-accent); stroke-width: 1; fill: none; }
.vx-overlay .vx-marquee { fill: color-mix(in srgb, var(--vx-accent) 12%, transparent); stroke: var(--vx-accent); stroke-width: 1; stroke-dasharray: 4 3; }
.vx-overlay .vx-guide { stroke: #ff2d8a; stroke-width: 1; fill: none; }
.vx-overlay .vx-rubber { stroke: var(--vx-accent); stroke-width: 1.25; fill: none; stroke-dasharray: 5 4; }
.vx-overlay .vx-rubber--solid { stroke-dasharray: none; }
.vx-overlay .vx-gradline { stroke: #fff; stroke-width: 3; fill: none; paint-order: stroke; filter: drop-shadow(0 0 1px #000); }
.vx-overlay .vx-t { font: 600 11px/1 system-ui, sans-serif; fill: #fff; stroke: rgba(0, 0, 0, .75); stroke-width: 3; paint-order: stroke; }

.vx-textedit {
    margin: 0; padding: 0; border: 1px dashed var(--vx-accent); outline: none; resize: none; overflow: hidden; white-space: pre;
    background: color-mix(in srgb, var(--vx-accent) 8%, transparent); user-select: text; -webkit-user-select: text; z-index: 6;
}

/* ---- top bar and tools ---- */
.vx-docname { border: 0; background: transparent; color: var(--rl-text-muted); padding: .2rem .5rem; border-radius: 8px; cursor: pointer; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-docname:hover { background: var(--rl-surface-sunken); color: var(--rl-text); }
.vx .pe-sw.is-none { background: linear-gradient(135deg, transparent 45%, #e5484d 45%, #e5484d 55%, transparent 55%), #fff; }
.vx .pe-sw { box-sizing: border-box; }
.vx .pe-pair { margin-bottom: .5rem; }
.vx-nones { display: flex; gap: 2px; }
.vx-none { border: 1px solid var(--pe-line); background: var(--rl-surface-raised); color: var(--rl-text-muted); width: 1.2rem; height: 1.2rem; border-radius: 4px; line-height: 1; font-size: .7rem; cursor: pointer; padding: 0; }
.vx-none:hover { color: var(--rl-text); border-color: var(--vx-accent); }

/* ---- inspector ---- */
.vx-insp { display: flex; flex-direction: column; }
.vx-insp__sec { padding: .5rem .65rem .6rem; border-bottom: 1px solid var(--pe-line); display: flex; flex-direction: column; gap: .45rem; }
.vx-insp__sec:last-child { border-bottom: 0; }
.vx-insp__h { margin: 0; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--rl-text-muted); }
.vx-insp__row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vx-insp__row > .pe-input, .vx-insp__row > select { flex: 1; min-width: 5rem; }
.vx-num { display: inline-flex; align-items: center; gap: .3rem; flex: 1; min-width: 5.2rem; }
.vx-num__l { color: var(--rl-text-muted); font-size: .74rem; min-width: 1rem; white-space: nowrap; }
.vx-numin { width: 100%; min-width: 0; max-width: 5.2rem; }
.vx-lock { min-width: 1.5rem; height: 1.5rem; }
.vx-colorfield { display: inline-flex; align-items: center; gap: .4rem; }
.vx-color { width: 1.9rem; height: 1.6rem; padding: 0; border: 1px solid var(--pe-line); border-radius: 5px; background: none; cursor: pointer; flex: none; }
.vx-hex { width: 5.6rem; }
.vx-paint { display: flex; flex-direction: column; gap: .45rem; }
.vx-paint .pe-seg__row { align-self: stretch; }
.vx-paint .pe-seg__b { flex: 1; padding: .22rem .3rem; }
.vx-paint__body { display: flex; flex-direction: column; gap: .4rem; }
.vx-grad { display: flex; flex-direction: column; gap: .45rem; }
.vx-gradbar { height: 1.3rem; border-radius: 6px; border: 1px solid var(--pe-line); }
.vx-stops { display: flex; flex-direction: column; gap: 3px; max-height: 11rem; overflow-y: auto; }
.vx-stop { display: flex; align-items: center; gap: .3rem; padding: 2px 3px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; }
.vx-stop.is-sel { border-color: color-mix(in srgb, var(--vx-accent) 60%, transparent); background: color-mix(in srgb, var(--vx-accent) 10%, transparent); }
.vx-stop .pe-rng__num { width: 3.1rem; }
.vx-strokeopts { display: flex; flex-direction: column; gap: .45rem; }
.vx-textfield { font: inherit; resize: vertical; min-height: 3.4rem; }
.vx .pe-rng--compact { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: .4rem; }
.vx .pe-rng--compact input[type=range] { width: 100%; }

/* ---- layers ---- */
.vx .pe__panels .pe-sec { flex: none; }
.vx .pe__panels .pe-sec--grow[open] { min-height: 14rem; }
.vx-layers { max-height: 18rem; min-height: 8rem; }
.vx-layer { gap: .25rem; padding-right: .25rem; }
.vx-layer.drop-into { outline: 2px solid var(--vx-accent); outline-offset: -2px; border-radius: 8px; }
.vx-caret { border: 0; background: transparent; padding: 0; width: 1rem; height: 1rem; display: inline-grid; place-items: center; cursor: pointer; color: var(--rl-text-muted); flex: none; }
.vx-caret .pe-ico { transition: transform .12s; }
.vx-caret.is-open .pe-ico { transform: rotate(90deg); }
.vx-caret--none { cursor: default; }
.vx-layer__ico { display: inline-grid; place-items: center; color: var(--rl-text-muted); flex: none; }
.vx-layer.is-active .vx-layer__ico { color: var(--vx-accent); }
.vx-layers__empty { padding: 1rem .6rem; text-align: center; }

/* ---- generate ---- */
.vx-ai { padding: .55rem .65rem .7rem; }
.vx-ai__modes { display: flex; width: 100%; }
.vx-ai__modes .pe-seg__b { flex: 1; padding: .28rem .2rem; font-size: .76rem; }
.vx-ai__modes .pe-seg__b:disabled { opacity: .4; cursor: default; }
.vx-ai__prompt { resize: vertical; font: inherit; min-height: 5rem; user-select: text; -webkit-user-select: text; }
.vx-ai__chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.vx-chip { border: 1px solid var(--pe-line); background: var(--rl-surface-raised); border-radius: 999px; padding: .12rem .55rem; font-size: .72rem; cursor: pointer; }
.vx-chip:hover { border-color: var(--vx-accent); background: color-mix(in srgb, var(--vx-accent) 10%, transparent); }
.vx-ai__go { display: flex; gap: .5rem; }
.vx-ai__go .pe-btn { flex: 1; }
.vx-ai__status { min-height: 1.2em; }
.vx-ai__raw pre { max-height: 10rem; overflow: auto; font-size: .7rem; white-space: pre-wrap; word-break: break-all; user-select: text; -webkit-user-select: text; background: var(--rl-surface-sunken); padding: .4rem; border-radius: 6px; }
.vx-ai__hist { display: flex; flex-direction: column; gap: 2px; }
.vx-hist { text-align: left; border: 0; background: transparent; padding: .2rem .4rem; border-radius: 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--rl-text-muted); }
.vx-hist:hover { background: var(--rl-surface-sunken); color: var(--rl-text); }

/* ---- dialogs reuse photo.css; the library thumbnails are vector, so they get a light tile ---- */
.vx .pe-lib__item img { background: #fff; object-fit: contain; }

/* ---- the newer tools (vector-tools-more.js) ---- */
/* Twenty-odd tools fit in two columns, the way drawing programs offer a double tool strip. */
.vx .pe__tools { width: 5.4rem; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; }
.vx .pe__tools .pe__sep, .vx .pe__tools .pe-pair, .vx .pe__tools .vx-nones { flex-basis: 100%; display: flex; justify-content: center; }
.vx-overlay .vx-frame-sel.is-board { stroke-dasharray: 5 3; }
.vx-frame.is-active { stroke: var(--vx-accent); }
.vx-overlay .vx-t--board { font-weight: 500; fill: var(--rl-text-muted, #888); stroke: none; }
.vx-overlay .vx-t--board.is-on { fill: var(--vx-accent); font-weight: 700; }
.vx-overlay .vx-face { fill: transparent; stroke: var(--vx-accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.vx-overlay .vx-face.is-on { fill: color-mix(in srgb, var(--vx-accent) 28%, transparent); opacity: 1; stroke-dasharray: none; }
.vx-overlay .vx-face.is-erase { fill: rgba(229, 72, 77, .32); stroke: #e5484d; opacity: 1; stroke-dasharray: none; }
.vx-overlay .vx-key { fill: none; stroke: var(--vx-accent); stroke-width: 3; }
.vx-overlay .vx-knife { stroke: #e5484d; stroke-width: 1.5; }
.vx-overlay .vx-erasing { fill: none; stroke: rgba(229, 72, 77, .28); stroke-linecap: round; stroke-linejoin: round; }
.vx-overlay .vx-brush { fill: none; stroke: #e5484d; stroke-width: 1.25; }
.vx-overlay .vx-h--cut { fill: #e5484d; stroke: #fff; }
.vx-overlay .vx-h--free { stroke: #fff; stroke-width: 2; }
.vx-overlay .vx-h--free.is-sel { stroke: var(--vx-accent); stroke-width: 3; }
.vx-overlay .vx-guide--doc { stroke: #00b3ff; opacity: .75; }
.vx-textedit--area { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- rulers ---- */
.vx-ruler, .vx-ruler__corner { position: absolute; z-index: 2; display: none; }
.vx-has-rulers .vx-ruler, .vx-has-rulers .vx-ruler__corner { display: block; }
.vx-ruler--x { top: 0; left: 0; height: 18px; cursor: row-resize; }
.vx-ruler--y { top: 0; left: 0; width: 18px; cursor: col-resize; }
.vx-ruler__corner { top: 0; left: 0; width: 18px; height: 18px; background: var(--rl-surface); border-right: 1px solid var(--pe-line); border-bottom: 1px solid var(--pe-line); z-index: 3; }

/* ---- inspector additions ---- */
.vx-fx { border: 1px solid var(--pe-line); border-radius: 8px; padding: .3rem .4rem; display: flex; flex-direction: column; gap: .3rem; }
.vx-fx.is-off { opacity: .6; }
.vx-fx__head { display: flex; align-items: center; gap: .3rem; }
.vx-fx__body { display: flex; flex-direction: column; gap: .3rem; }
.vx-dashes { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .5rem; }
.vx-banner { background: color-mix(in srgb, var(--vx-accent) 12%, transparent); }
.vx-badge { background: color-mix(in srgb, var(--vx-accent) 18%, transparent); color: var(--rl-text); border-radius: 999px; padding: .15rem .6rem; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.vx-optname { width: 9rem; }

/* ---- newer panels (vector-panels-more.js) ---- */
.vx-panel { padding: .45rem .6rem .6rem; display: flex; flex-direction: column; gap: .45rem; }
.vx-panel__bar { justify-content: flex-start; }
.vx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); gap: .35rem; max-height: 15rem; overflow-y: auto; }
.vx-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .3rem .2rem; border: 1px solid var(--pe-line); border-radius: 8px; background: var(--rl-surface-raised); cursor: pointer; color: var(--rl-text); min-width: 0; }
.vx-tile:hover, .vx-tile.is-on { border-color: var(--vx-accent); }
.vx-tile__name { font-size: .68rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-tile__more { position: absolute; top: 1px; right: 4px; font-size: .8rem; color: var(--rl-text-muted); line-height: 1; padding: 1px 2px; }
.vx-tile__more:hover { color: var(--rl-text); }
.vx-mini { background: repeating-conic-gradient(#e3e5ea 0 25%, #fff 0 50%) 0 0 / 8px 8px; border-radius: 4px; }
.vx-swatches { display: flex; flex-direction: column; gap: .3rem; max-height: 14rem; overflow-y: auto; }
.vx-swatches__grp { margin-top: .2rem; }
.vx-sw { position: relative; }
.vx-sw.is-global::after { content: ''; position: absolute; right: 0; bottom: 0; border: 5px solid transparent; border-right-color: #fff; border-bottom-color: #fff; filter: drop-shadow(0 0 1px #000); }
.vx-boards { display: flex; flex-direction: column; gap: 3px; max-height: 15rem; overflow-y: auto; }
.vx-board { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; padding: .25rem .35rem; border-radius: 8px; border: 1px solid transparent; cursor: pointer; }
.vx-board.is-active { border-color: color-mix(in srgb, var(--vx-accent) 60%, transparent); background: color-mix(in srgb, var(--vx-accent) 9%, transparent); }
.vx-board__n { color: var(--rl-text-muted); font-size: .74rem; min-width: 1rem; }
.vx-boards__name { flex: 1; min-width: 6rem; }
.vx-board__dims { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .5rem; flex-basis: 100%; }
.vx-board__dims .pe-rng__num { width: 100%; }

/* ---- image trace ---- */
.vx-trace { display: grid; grid-template-columns: minmax(14rem, 1fr) auto; gap: 1rem; align-items: start; }
.vx-trace__preview { width: 260px; height: 260px; display: grid; place-items: center; border: 1px solid var(--pe-line); border-radius: 8px; overflow: hidden; }
.vx-trace__preview svg { width: 100%; height: 100%; }

@container (max-width: 640px) {
    .vx .pe__tools { width: 3.1rem; }
    .vx-trace { grid-template-columns: 1fr; }
}

@media (max-width: 899px) {
    .vx .pe__panels { width: min(20rem, 88vw); }
    .vx-trace { grid-template-columns: 1fr; }
}