/* FAI-P07-06 — Venue editor surface (global by design): the editor spans several components
   (VenueEditor root + canvas + sidebar + properties), and Blazor scoped CSS only matches one
   component's elements, so the .fpe-* design system lives here. The admin.css full-bleed rule
   (.shell .shell-content:has(.fpe)) keys off the .fpe root rendered by VenueEditor.
   FAI-P08-03 — every value now resolves through the GCC token layer (tokens.css), so the
   editor re-skins with the light/dark/high-contrast themes; SVG shapes use fill-opacity
   instead of hex-alpha so the theme's semantic color drives them. */

.fpe { display:flex; flex-direction:column; gap:12px; min-height:calc(100vh - 120px); }
.fpe-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; background:var(--fai-surface); border:var(--fai-border-width) solid var(--fai-border); border-radius:var(--fai-radius-md); }
.fpe-toolbar label, .fpe-tools label, .fpe-properties label { font-size:var(--fai-text-sm); font-weight:600; color:var(--fai-ink-2); }
.fpe-toolbar select, .fpe-tools input, .fpe-properties input, .fpe-properties select { border:var(--fai-border-width) solid var(--fai-border); border-radius:var(--fai-radius-md); padding:6px 8px; background:var(--fai-surface-2); color:var(--fai-ink-2); }
.fpe-check { display:flex; gap:5px; align-items:center; }
.fpe-status { margin-left:auto; color:var(--fai-ink-3); font-family:var(--fai-font-mono); font-size:var(--fai-text-xs); }
.fpe-layout { display:grid; grid-template-columns:190px minmax(0,1fr) 240px; gap:12px; min-height:0; flex:1; }
.fpe-tools, .fpe-properties { display:flex; flex-direction:column; gap:8px; min-height:0; overflow-y:auto; padding:14px; background:var(--fai-surface); border:var(--fai-border-width) solid var(--fai-border); border-radius:var(--fai-radius-md); }
.fpe-mode { display:flex; flex-direction:column; gap:4px; }
.fpe-mode strong { font-size:var(--fai-text-sm); }
.fpe-tools button { text-align:left; border:0; border-radius:var(--fai-radius-md); padding:7px 9px; background:transparent; color:var(--fai-ink-2); cursor:pointer; }
.fpe-tools button:hover, .fpe-tools button.active { background:var(--fai-accent-soft); color:var(--fai-primary-strong); font-weight:600; }
.fpe-tools button.add { margin-top:4px; background:var(--fai-primary); color:var(--fai-on-primary); text-align:center; }
.fpe-tools hr { width:100%; border:0; border-top:var(--fai-border-width) solid var(--fai-border); }
.fpe-help { font-size:var(--fai-text-xs); line-height:1.45; color:var(--fai-ink-3); }
.fpe-metrics { padding:8px; background:var(--fai-surface-2); border-radius:var(--fai-radius-md); font-size:var(--fai-text-xs); line-height:1.7; color:var(--fai-ink-3); }
.fpe-canvas-wrap { min-width:0; padding:12px; background:var(--fai-surface-2); border:var(--fai-border-width) solid var(--fai-border); border-radius:var(--fai-radius-md); }
.fpe-canvas { display:block; width:100%; height:calc(100vh - 270px); min-height:520px; background:var(--fai-surface); border:var(--fai-border-width) solid var(--fai-border-strong); cursor:crosshair; touch-action:none; }
.fpe-drawing-preview { fill:var(--fai-primary-ink); fill-opacity:.2; stroke:var(--fai-primary-ink); stroke-width:2; stroke-dasharray:6 4; pointer-events:none; }
.fpe-drawing-line { fill:none; stroke-width:4; }
/* FAI-P07-06 — Marquee multi-select drag, Ctrl+drag split-cut line, unsaved-changes chip. */
.fpe-marquee { fill:var(--fai-primary-ink); fill-opacity:.1; stroke:var(--fai-primary-ink); stroke-width:1.5; stroke-dasharray:4 3; pointer-events:none; }
.fpe-cut-line { stroke:var(--fai-danger); stroke-width:3; stroke-dasharray:8 5; pointer-events:none; }
.fpe-dirty { color:var(--fai-danger); font-weight:600; }
.fpe-reference rect { stroke:var(--fai-ink-3); stroke-dasharray:6 4; }
.fpe-reference text { fill:var(--fai-ink-2); font-size:14px; }
.fpe-reference { pointer-events:none; }
.fpe-route-preview { fill:none; stroke:var(--fai-primary-ink); stroke-width:4; stroke-dasharray:10 6; pointer-events:none; }
.fpe-boundary { fill:none; stroke:var(--fai-border-strong); stroke-width:2; }
.fpe-feature polygon, .fpe-feature circle { fill:var(--fai-info); fill-opacity:.25; stroke:var(--fai-info); stroke-width:1.5; }
.fpe-feature polyline { fill:none; stroke:var(--fai-info); stroke-width:3; }
.fpe-feature text { fill:var(--fai-ink-2); font-size:12px; pointer-events:none; }
.fpe-feature.selected polygon, .fpe-feature.selected circle { fill:var(--fai-warning-strong); fill-opacity:.3; stroke:var(--fai-warning-strong); stroke-width:3; }
.fpe-feature.selected polyline { stroke:var(--fai-warning-strong); stroke-width:5; }
.fpe-legend { display:flex; flex-wrap:nowrap; justify-content:space-between; gap:8px; padding-top:8px; color:var(--fai-ink-3); font-size:var(--fai-text-xs); }
.fpe-legend span { white-space:nowrap; }
.fpe-properties label { display:flex; flex-direction:column; gap:4px; }
.fpe-properties .danger { margin-top:auto; border:var(--fai-border-width) solid var(--fai-danger); color:var(--fai-danger); background:transparent; border-radius:var(--fai-radius-md); padding:8px; cursor:pointer; }
.fpe-validation { margin-top:10px; padding:8px; border-radius:var(--fai-radius-md); font-size:var(--fai-text-xs); }
.fpe-validation.ok { background:var(--fai-success-soft); color:var(--fai-success); }
.fpe-validation.bad { background:var(--fai-danger-soft); color:var(--fai-danger); }
@media (max-width: 900px) { .fpe-layout { grid-template-columns:1fr; } .fpe-tools { order:1; flex-direction:row; flex-wrap:wrap; }.fpe-properties { order:3; }.fpe-canvas-wrap { order:2; } }

/* FAI-P07-06 — Pan/zoom controls, vertex handles, alignment guides, resize handles. Each
   affordance telegraphs its gesture: per-direction resize cursors on the handles, grab
   cursors on vertices and the rotation handle. */
.fpe-view-controls { display:flex; gap:4px; margin-bottom:8px; }
.fpe-view-controls button { width:34px; height:28px; border:var(--fai-border-width) solid var(--fai-border); background:var(--fai-surface); color:var(--fai-ink-2); border-radius:var(--fai-radius-md); cursor:pointer; font-weight:700; }
.fpe-view-sep { width:1px; align-self:stretch; background:var(--fai-border); }
.fpe-view-controls button.wide { width:auto; min-width:34px; padding:0 10px; font-weight:600; }
.fpe-vertex { fill:var(--fai-surface); stroke:var(--fai-primary-ink); stroke-width:2.5; cursor:grab; }
.fpe-vertex.dragging { fill:var(--fai-primary-ink); cursor:grabbing; }
.fpe-guide { stroke:var(--fai-warning-strong); stroke-width:1; stroke-dasharray:4 4; pointer-events:none; }
.fpe-handle { fill:var(--fai-surface); stroke:var(--fai-primary-ink); stroke-width:2; }
.fpe-handle.nwse { cursor:nwse-resize; }
.fpe-handle.nesw { cursor:nesw-resize; }
.fpe-handle.ns { cursor:ns-resize; }
.fpe-handle.ew { cursor:ew-resize; }
.fpe-handle.dragging { fill:var(--fai-primary-ink); }
.fpe-rotate-stem { stroke:var(--fai-primary-ink); stroke-width:1.5; stroke-dasharray:3 3; pointer-events:none; }
.fpe-rotate-handle { fill:var(--fai-surface); stroke:var(--fai-primary-ink); stroke-width:2; cursor:grab; }
.fpe-rotate-handle.dragging { fill:var(--fai-primary-ink); cursor:grabbing; }

/* Keyboard hint chips (sidebar tools + cheat sheet). */
.fpe-kbd { display:inline-block; min-width:1.4em; padding:1px 5px; margin-inline-start:4px; border:var(--fai-border-width) solid var(--fai-border); border-radius:var(--fai-radius-sm); background:var(--fai-surface-2); font-family:var(--fai-font-mono); font-size:var(--fai-text-xs); text-align:center; color:var(--fai-ink-3); }

/* FAI-P07-06 — Fullscreen editing overlay: the editor covers the viewport (above the admin
   layout) and side panels collapse away, giving the whole screen to the canvas. Grid placement
   is pinned per region: with a panel hidden, auto-placement would otherwise drop the canvas
   into the first (collapsed 0px) track — measured as a 2px-wide canvas. The backdrop must be
   OPAQUE (--fai-canvas), otherwise the admin shell's sidebar/menus show through the overlay. */
.fpe.fs { position:fixed; inset:0; z-index:950; gap:6px; padding:8px 10px; background:var(--fai-canvas); overflow:hidden; }
.fpe.fs .fpe-toolbar { padding:6px 8px; }
.fpe.fs .fpe-layout { flex:1; min-height:0; }
.fpe.fs .fpe-tools { grid-column:1; }
.fpe.fs .fpe-canvas-wrap { grid-column:2; display:flex; flex-direction:column; min-height:0; padding:8px; }
.fpe.fs .fpe-properties { grid-column:3; }
.fpe.fs .fpe-canvas { flex:1; height:auto; min-height:0; }
.fpe.fs .fpe-legend { flex:none; padding-top:6px; }

/* Dialogs: exact-size resize + keyboard cheat sheet. */
.fpe-dialog-backdrop { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; background:var(--fai-scrim-backdrop); }
.fpe-dialog { display:flex; flex-direction:column; gap:12px; width:min(420px, 100%); padding:20px; border-radius:var(--fai-radius-lg); background:var(--fai-surface); box-shadow:var(--fai-shadow-md); }
.fpe-dialog h2, .fpe-dialog p { margin:0; }
.fpe-dialog label { display:flex; flex-direction:column; gap:5px; font-weight:600; }
.fpe-dialog input { padding:8px; border:var(--fai-border-width) solid var(--fai-border); border-radius:var(--fai-radius-md); }
.fpe-dialog-actions { display:flex; justify-content:flex-end; gap:8px; }
.fpe-dialog-actions button { padding:8px 12px; border:var(--fai-border-width) solid var(--fai-border); border-radius:var(--fai-radius-button); background:var(--fai-surface-2); color:var(--fai-ink-2); cursor:pointer; }
.fpe-dialog-actions .add { border-color:var(--fai-primary-line); background:var(--fai-primary); color:var(--fai-on-primary); }
.fpe-shortcuts { width:min(560px, 100%); max-height:80vh; overflow-y:auto; }
.fpe-shortcuts dl { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; }
.fpe-shortcuts dt { white-space:nowrap; }
.fpe-shortcuts dd { margin:0; font-size:var(--fai-text-sm); color:var(--fai-ink-2); }