/* Fleet Command — FACILITY (freeform floor-plan designer). Top-down blueprint canvas: objects are
   absolutely positioned in grid units (--u). Built from the console's own --fc-* theme tokens so it
   re-skins with every theme. */
.fcfWrap{ display:flex; flex-direction:column; gap:14px; --fc-accent2:#5aa9ff; }   /* "idle but online" blue — theme has no accent2 */

/* ---- selector bar ---- */
.fcfBar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:2px 0; }
.fcfSels{ display:flex; gap:10px; }
.fcfSelWrap{ display:flex; align-items:flex-end; gap:5px; }
.fcfSelRen{ margin-bottom:2px; }
.fcfSel{ display:flex; flex-direction:column; gap:3px; }
.fcfSel span{ font-family:var(--fc-mono); font-size:.5rem; font-weight:700; letter-spacing:.16em; color:var(--fc-dim); }
.fcfSel select{ appearance:none; cursor:pointer; min-width:150px; padding:7px 28px 7px 12px; border-radius:9px; border:1px solid var(--fc-line2);
  background:color-mix(in srgb,var(--fc-panel) 70%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%238893a3' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;
  color:var(--fc-ink); font-size:.8rem; font-weight:700; white-space:nowrap; }
.fcfSel select:focus{ outline:none; border-color:color-mix(in srgb,var(--fc-accent) 50%, var(--fc-line2)); }
.fcfRoomTabs{ display:flex; gap:6px; flex-wrap:wrap; flex:0 1 auto; }
/* current-location breadcrumb (Building › Floor › Room) */
.fcfCrumb{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; overflow:hidden;
  font-family:var(--fc-mono); font-size:.66rem; letter-spacing:.05em; }
.fcfCrumb b{ color:var(--fc-ink); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fcfCrumb i{ color:var(--fc-faint); font-style:normal; }
@media (max-width:900px){ .fcfCrumb{ display:none; } }
.fcfRoomTab{ appearance:none; cursor:pointer; padding:7px 13px; border-radius:8px; font-size:.72rem; font-weight:700; letter-spacing:.02em;
  color:var(--fc-dim); border:1px solid var(--fc-line2); background:color-mix(in srgb,var(--fc-panel) 55%, transparent); transition:color .14s, border-color .14s; }
.fcfRoomTab:hover{ color:var(--fc-ink); }
.fcfRoomTab.active{ color:var(--fc-ink); border-color:color-mix(in srgb,var(--fc-accent) 50%, var(--fc-line2)); background:color-mix(in srgb,var(--fc-accent) 10%, transparent); }
.fcfRoomTab--add{ font-weight:800; color:var(--fc-accent); padding:7px 11px; }
.fcfBarRight{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.fcfStat{ font-family:var(--fc-mono); font-size:.58rem; letter-spacing:.08em; color:var(--fc-dim); white-space:nowrap; }
.fcfStat b{ color:var(--fc-ink); font-size:.9rem; }
.fcfBtn{ appearance:none; cursor:pointer; font-family:var(--fc-mono); font-size:.6rem; font-weight:700; letter-spacing:.1em;
  padding:7px 12px; border-radius:8px; color:var(--fc-dim); border:1px solid var(--fc-line2); background:color-mix(in srgb,var(--fc-panel) 60%, transparent); transition:color .14s, border-color .14s; }
.fcfBtn:hover{ color:var(--fc-ink); border-color:color-mix(in srgb,var(--fc-accent) 45%, var(--fc-line2)); }
.fcfBtn.is-on{ color:var(--fc-accent); border-color:color-mix(in srgb,var(--fc-accent) 55%, var(--fc-line2)); background:color-mix(in srgb,var(--fc-accent) 12%, transparent); }
.fcfBtn--del:hover{ color:var(--fc-bad); border-color:color-mix(in srgb,var(--fc-bad) 45%, var(--fc-line2)); }

/* ---- stage + blueprint canvas ---- */
.fcfStage{ display:flex; flex-direction:column; gap:12px; }
.fcfRoomLabel{ font-family:var(--fc-mono); font-size:.56rem; font-weight:700; letter-spacing:.12em; color:var(--fc-dim); }
.fcfCanvasWrap{ overflow:auto; border:2px solid color-mix(in srgb,var(--fc-ink) 24%, var(--fc-line2)); border-radius:11px;
  background-color:color-mix(in srgb,var(--fc-panel) 40%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fc-ink) 7%, transparent), inset 0 3px 30px color-mix(in srgb,#000 20%, transparent);
  padding:14px; }
/* the room floor: a positioned grid the objects live on. Walls = its border. */
.fcfCanvas{ position:relative; margin:6px; border:2px solid color-mix(in srgb,var(--fc-ink) 30%, var(--fc-line2)); border-radius:6px;
  background-color:color-mix(in srgb,var(--fc-panel) 30%, transparent);
  background-image:
    linear-gradient(color-mix(in srgb,var(--fc-ink) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,var(--fc-ink) 6%, transparent) 1px, transparent 1px);
  background-size:var(--u) var(--u); background-position:0 0;
  box-shadow:inset 0 0 40px color-mix(in srgb,#000 18%, transparent); }
.fcfStage.is-edit .fcfCanvas{ border-style:dashed; border-color:color-mix(in srgb,var(--fc-accent) 45%, var(--fc-line2)); cursor:default; }
.fcfCanvasHint{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:30px; color:var(--fc-dim); font-size:.82rem; line-height:1.55; }

/* room resize grip (bottom-right of canvas) */
.fcfRoomHandle{ position:absolute; right:-9px; bottom:-9px; width:18px; height:18px; border-radius:5px; cursor:nwse-resize; z-index:40;
  background:var(--fc-accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--fc-panel) 80%, transparent), 0 4px 12px color-mix(in srgb,var(--fc-accent) 40%, transparent); }
.fcfRoomHandle::after{ content:""; position:absolute; right:4px; bottom:4px; width:6px; height:6px; border-right:2px solid #fff; border-bottom:2px solid #fff; opacity:.85; }

/* ---- objects (absolute) ---- */
.fcfObj{ position:absolute; box-sizing:border-box; }
.fcfStage.is-edit{ user-select:none; -webkit-user-select:none; }
.fcfStage.is-edit .fcfObj{ cursor:default; touch-action:none; }
.fcfObj.is-sel{ z-index:30; }
.fcfObjTools{ position:absolute; left:0; top:-30px; display:inline-flex; gap:3px; padding:3px; border-radius:8px; z-index:31;
  background:linear-gradient(165deg,var(--fc-panel2,var(--fc-panel)),var(--fc-panel)); border:1px solid var(--fc-line2); box-shadow:0 10px 26px rgba(0,0,0,.45); white-space:nowrap; }
.fcfObjTools--below{ top:auto; bottom:-30px; }
.fcfHandle{ position:absolute; width:14px; height:14px; z-index:31; }
.fcfHandle--se{ right:-7px; bottom:-7px; border-radius:4px; cursor:nwse-resize; background:var(--fc-accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--fc-panel) 80%, transparent); }

/* racks (shelves) */
.fcfObj--rack{ display:flex; flex-direction:column; min-width:0; overflow:hidden; border-radius:10px;
  border:1px solid var(--fc-line2); background:color-mix(in srgb,var(--fc-panel) 78%, transparent); box-shadow:0 6px 16px color-mix(in srgb,#000 22%, transparent); }
.fcfObj--rack.is-sel{ border-color:var(--fc-accent); box-shadow:0 0 0 1px var(--fc-accent), 0 10px 24px color-mix(in srgb,var(--fc-accent) 24%, transparent); }
.fcfRackHead{ display:flex; align-items:center; gap:6px; padding:6px 9px; min-height:30px; border-bottom:1px solid var(--fc-line2);
  background:color-mix(in srgb,var(--fc-ink) 9%, transparent); }
.fcfStage.is-edit .fcfRackHead{ cursor:grab; }
.fcfRackTools{ display:inline-flex; gap:3px; margin-left:8px; flex:none; }
.fcfGrip{ width:9px; height:9px; flex:none; border-radius:2px; opacity:0;
  background:
    radial-gradient(currentColor 1px, transparent 1.4px) 0 0 / 3px 3px; color:var(--fc-dim); }
.fcfStage.is-edit .fcfGrip{ opacity:.5; }
.fcfRackName{ font-family:var(--fc-mono); font-size:.56rem; font-weight:700; letter-spacing:.05em; color:var(--fc-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fcfRackFill{ font-family:var(--fc-mono); font-size:.5rem; color:var(--fc-dim); margin-left:auto; }
.fcfRackSlots{ flex:1; display:flex; gap:4px; padding:5px; min-height:0; min-width:0; }
.fcfObj--v .fcfRackSlots{ flex-direction:column; }

/* Header/controls edge — lets facing racks form clean rows with labels on the outside.
   Drives the flex direction of the rack; the header strip goes vertical for left/right. */
.fcfObj--head-top{ flex-direction:column; }
.fcfObj--head-bottom{ flex-direction:column-reverse; }
.fcfObj--head-left{ flex-direction:row; }
.fcfObj--head-right{ flex-direction:row-reverse; }
.fcfObj--head-bottom .fcfRackHead{ border-bottom:none; border-top:1px solid var(--fc-line2); }
.fcfObj--head-left .fcfRackHead{ border-bottom:none; border-right:1px solid var(--fc-line2); }
.fcfObj--head-right .fcfRackHead{ border-bottom:none; border-left:1px solid var(--fc-line2); }
/* vertical header strip (left/right): stack + rotate the label so it reads down the edge */
.fcfObj--head-left .fcfRackHead, .fcfObj--head-right .fcfRackHead{
  flex-direction:column; align-items:center; justify-content:flex-start; gap:5px;
  width:auto; min-width:26px; min-height:0; height:100%; padding:8px 5px; }
.fcfObj--head-left .fcfRackName, .fcfObj--head-right .fcfRackName{ writing-mode:vertical-rl; text-orientation:mixed; max-height:100%; }
.fcfObj--head-left .fcfRackFill, .fcfObj--head-right .fcfRackFill{ writing-mode:vertical-rl; margin-left:0; margin-top:auto; }
.fcfObj--head-left .fcfRackTools, .fcfObj--head-right .fcfRackTools{ flex-direction:column; margin-left:0; margin-top:6px; }

/* slots (printer bays) */
.fcfSlot{ appearance:none; cursor:pointer; flex:1; width:100%; min-width:0; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border-radius:7px; border:1px solid var(--fc-line2); background:color-mix(in srgb,var(--fc-panel) 50%, transparent); color:var(--fc-ink);
  padding:4px 3px; transition:border-color .14s, transform .1s; position:relative; overflow:hidden; }
.fcfSlot:hover{ transform:translateY(-1px); border-color:color-mix(in srgb,var(--fc-accent) 50%, var(--fc-line2)); }
.fcfSlot--empty{ border-style:dashed; color:var(--fc-faint); }
.fcfPlus{ font-size:1.1rem; font-weight:400; line-height:1; color:var(--fc-dim); }
.fcfSlotName{ font-size:.6rem; font-weight:700; line-height:1.1; text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fcfSlotSt{ font-family:var(--fc-mono); font-size:.48rem; letter-spacing:.06em; color:var(--fc-dim); }
.fcfSlotStat{ font-family:var(--fc-mono); font-size:.46rem; font-weight:700; letter-spacing:.03em; color:var(--fc-accent); margin-top:1px; white-space:nowrap; }
.fcfSlot--on::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--fc-line2); }

/* benches (freely resizable blocks) */
.fcfObj--bench{ border-radius:8px; border:1px solid color-mix(in srgb,var(--fc-ink) 20%, var(--fc-line2));
  background:repeating-linear-gradient(135deg, color-mix(in srgb,var(--fc-ink) 10%, transparent) 0 8px, color-mix(in srgb,var(--fc-ink) 4%, transparent) 8px 16px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fc-ink) 6%, transparent); }
.fcfObj--bench.is-sel{ border-color:var(--fc-accent); box-shadow:0 0 0 1px var(--fc-accent); }
.fcfBenchBody{ width:100%; height:100%; display:grid; place-items:center; cursor:default; }
.fcfStage.is-edit .fcfBenchBody{ cursor:grab; }
.fcfBenchName{ font-family:var(--fc-mono); font-size:.55rem; font-weight:700; letter-spacing:.08em; color:var(--fc-dim); text-transform:uppercase; }

/* cabinet / storage — a rack-style header (name + inline tools, reusing .fcfRackHead) over a shelved body.
   No fixed flex-direction here — the .fcfObj--head-* class sets it so the header can sit any edge. */
.fcfObj--cabinet{ display:flex; min-width:0; overflow:hidden; border-radius:8px;
  border:1px solid color-mix(in srgb,var(--fc-ink) 28%, var(--fc-line2));
  background:color-mix(in srgb,var(--fc-panel) 72%, transparent);
  box-shadow:0 4px 12px color-mix(in srgb,#000 22%, transparent), inset 0 0 0 1px color-mix(in srgb,var(--fc-ink) 6%, transparent); }
.fcfObj--cabinet.is-sel{ border-color:var(--fc-accent); box-shadow:0 0 0 1px var(--fc-accent), 0 8px 20px color-mix(in srgb,var(--fc-accent) 22%, transparent); }
.fcfCabinetBody{ position:relative; flex:1; min-height:0; }
.fcfCabinetShelves{ position:absolute; inset:5px; border:1px solid color-mix(in srgb,var(--fc-ink) 16%, transparent); border-radius:4px;
  background:repeating-linear-gradient(to bottom,
    transparent 0, transparent 20px,
    color-mix(in srgb,var(--fc-ink) 15%, transparent) 20px, color-mix(in srgb,var(--fc-ink) 15%, transparent) 21px);
  pointer-events:none; }

/* freeform text label — bold, rotatable, drop anywhere to name a row / wing / zone */
.fcfObj--label{ background:transparent; border:1px dashed transparent; border-radius:6px; display:grid; place-items:center; overflow:visible; }
.fcfStage.is-edit .fcfObj--label{ border-color:color-mix(in srgb,var(--fc-line2) 55%, transparent); }
.fcfObj--label.is-sel{ border-color:var(--fc-accent); }
.fcfLabelBody{ font-family:var(--fc-mono); font-weight:800; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fc-ink); white-space:nowrap; user-select:none; cursor:default; }
.fcfStage.is-edit .fcfLabelBody{ cursor:grab; }

/* doors — a wall opening with a swing arc. The body rotates as a whole (real 90° turns) and the arc is
   kept a TRUE quarter circle (aspect-ratio:1, driven by the box's short side) so it never distorts. */
/* container-type lets the arc size to 100cqmin = the SHORTER side of the box, so it stays a true
   quarter circle at any aspect / rotation (fixes "rotated door is longer than it should be"). */
.fcfObj--door{ overflow:visible; container-type:size; }
.fcfDoorBody{ position:relative; width:100%; height:100%; cursor:default; transform-origin:center center; }
.fcfStage.is-edit .fcfDoorBody{ cursor:grab; }
.fcfDoorArc2{ position:absolute; left:0; bottom:0; width:100cqmin; height:100cqmin; border:1.4px dashed color-mix(in srgb,var(--fc-accent) 55%, var(--fc-line2)); border-top:0; border-left:0; border-radius:0 0 100% 0; opacity:.6; }
.fcfDoorLeaf{ position:absolute; left:0; bottom:0; width:3px; height:100cqmin; background:color-mix(in srgb,var(--fc-accent) 70%, var(--fc-line2)); border-radius:2px; }
.fcfObj--door.is-sel .fcfDoorArc2{ border-color:var(--fc-accent); opacity:.95; }

/* windows — a thin double-line pane on a wall. Horizontal bar when the box is wider than tall, vertical
   when taller than wide, so a rotate (which swaps w/h) turns the pane 90° instead of stretching it. */
.fcfObj--window{ overflow:visible; }
.fcfWinBody{ position:relative; width:100%; height:100%; display:grid; place-items:center; cursor:default; }
.fcfStage.is-edit .fcfWinBody{ cursor:grab; }
.fcfWinPane{ width:100%; height:8px; border-top:2px solid color-mix(in srgb,var(--fc-accent2) 75%, var(--fc-line2)); border-bottom:2px solid color-mix(in srgb,var(--fc-accent2) 75%, var(--fc-line2));
  background:color-mix(in srgb,var(--fc-accent2) 14%, transparent); border-radius:1px; }
.fcfObj--window.is-tall .fcfWinPane{ width:8px; height:100%; border-top:0; border-bottom:0;
  border-left:2px solid color-mix(in srgb,var(--fc-accent2) 75%, var(--fc-line2)); border-right:2px solid color-mix(in srgb,var(--fc-accent2) 75%, var(--fc-line2)); }
.fcfObj--window.is-sel .fcfWinPane{ border-color:var(--fc-accent2); }
.fcfObjTag{ position:absolute; left:50%; top:-14px; transform:translateX(-50%); font-family:var(--fc-mono); font-size:.42rem; letter-spacing:.08em; color:var(--fc-faint); white-space:nowrap; opacity:0; }
.fcfObj.is-sel .fcfObjTag{ opacity:1; }

/* status LEDs (shared tones) */
.fcfLed{ width:11px; height:11px; border-radius:50%; background:var(--fc-faint); box-shadow:0 0 8px currentColor; color:var(--fc-faint); flex:none; }
.is-run .fcfLed, .fcfLed.is-run{ background:var(--fc-good); color:var(--fc-good); animation:fcfPulse 1.7s ease-in-out infinite; }
.is-idle .fcfLed, .fcfLed.is-idle{ background:var(--fc-accent2); color:var(--fc-accent2); }
.is-bad .fcfLed, .fcfLed.is-bad{ background:var(--fc-bad); color:var(--fc-bad); animation:fcfPulse 1s ease-in-out infinite; }
.is-warn .fcfLed, .fcfLed.is-warn{ background:var(--fc-warn); color:var(--fc-warn); }
.is-off .fcfLed, .fcfLed.is-off{ background:var(--fc-faint); color:transparent; box-shadow:none; }
.fcfSlot.is-run::before{ background:var(--fc-good); box-shadow:0 0 10px var(--fc-good); }
.fcfSlot.is-bad::before{ background:var(--fc-bad); box-shadow:0 0 10px var(--fc-bad); }
.fcfSlot.is-warn::before{ background:var(--fc-warn); }
.fcfSlot.is-idle::before{ background:var(--fc-accent2); }
@keyframes fcfPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* micro-buttons (object toolbar) */
.fcfMini{ appearance:none; cursor:pointer; font-family:var(--fc-mono); font-size:.62rem; font-weight:700; letter-spacing:.04em; line-height:1;
  padding:5px 8px; border-radius:6px; color:var(--fc-dim); border:1px solid var(--fc-line2); background:color-mix(in srgb,var(--fc-panel) 60%, transparent); }
.fcfMini:hover{ color:var(--fc-ink); border-color:color-mix(in srgb,var(--fc-accent) 45%, var(--fc-line2)); }
.fcfMini--del:hover{ color:var(--fc-bad); border-color:color-mix(in srgb,var(--fc-bad) 45%, var(--fc-line2)); }

/* palette (add objects + snap toggle) */
.fcfPalette{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; border-radius:11px;
  border:1px dashed color-mix(in srgb,var(--fc-accent) 35%, var(--fc-line2)); background:color-mix(in srgb,var(--fc-accent) 5%, transparent); }
.fcfPalLabel{ font-family:var(--fc-mono); font-size:.52rem; font-weight:700; letter-spacing:.16em; color:var(--fc-dim); margin-right:2px; }
.fcfPalBtn{ appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:9px;
  font-size:.74rem; font-weight:700; color:var(--fc-ink); border:1px solid var(--fc-line2); background:color-mix(in srgb,var(--fc-panel) 65%, transparent); transition:border-color .14s, transform .1s; }
.fcfPalBtn:hover{ transform:translateY(-1px); border-color:color-mix(in srgb,var(--fc-accent) 50%, var(--fc-line2)); }
.fcfPalIc{ font-size:.9rem; line-height:1; color:var(--fc-accent); }
.fcfPalBtn--snap{ margin-left:auto; font-family:var(--fc-mono); font-size:.6rem; letter-spacing:.08em; color:var(--fc-dim); }
.fcfPalBtn--snap.is-on{ color:var(--fc-accent); border-color:color-mix(in srgb,var(--fc-accent) 55%, var(--fc-line2)); background:color-mix(in srgb,var(--fc-accent) 12%, transparent); }

/* empty state + presets */
.fcfEmpty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:44px 24px;
  border:1px dashed var(--fc-line2); border-radius:16px; }
.fcfEmptyMark{ width:52px; height:52px; display:grid; place-items:center; border-radius:13px;
  border:1px solid color-mix(in srgb,var(--fc-accent) 40%, var(--fc-line2)); background:color-mix(in srgb,var(--fc-accent) 10%, transparent); }
.fcfEmptyMark svg{ width:26px; height:26px; fill:none; stroke:var(--fc-accent); stroke-width:1.3; }
.fcfEmpty h3{ margin:2px 0 0; font-size:1.05rem; font-weight:800; color:var(--fc-ink); }
.fcfEmpty p{ margin:0; max-width:520px; font-size:.82rem; line-height:1.55; color:var(--fc-dim); }
.fcfPresets{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; width:min(680px,100%); margin-top:8px; }
.fcfPreset{ appearance:none; cursor:pointer; text-align:left; padding:14px; border-radius:12px; border:1px solid var(--fc-line2);
  background:color-mix(in srgb,var(--fc-panel) 55%, transparent); color:var(--fc-ink); transition:border-color .14s, transform .1s; }
.fcfPreset:hover{ transform:translateY(-1px); border-color:color-mix(in srgb,var(--fc-accent) 50%, var(--fc-line2)); }
.fcfPreset b{ display:block; font-size:.88rem; }
.fcfPreset span{ display:block; margin-top:4px; font-size:.72rem; color:var(--fc-dim); line-height:1.45; }

/* assignment / detail popover */
/* ── THE SLOT MENU ───────────────────────────────────────────────────────────────────────────────
   WHY THIS IS NOT JUST A BORDER TWEAK. The menu had a border, a radius, a gradient and a shadow, and
   still read as part of the page. Three causes, all of which had to go:
     1. `--fc-panel2` falls back to `--fc-panel`, so the "gradient" resolved to a FLAT fill in exactly
        the colour of every panel behind it. The menu was the same surface as the floor plan.
     2. `--fc-line2` is the base line colour (#2a3240) — on a dark panel that edge is barely present.
     3. Nothing dimmed the page. With no backdrop there is no moment of "something opened", so the
        menu had to carry the entire signal on its own and could not.
   The fix separates the menu from the page on FOUR channels at once — surface, edge, elevation and a
   dimmed backdrop — because any one of them alone is what was already being attempted. */

/* The backdrop. Pushes the floor plan back so the menu is unmistakably in front of it, and gives the
   click-anywhere-to-close gesture something to land on. */
.fcfScrim{ position:fixed; inset:0; z-index:2147483590; background:rgba(4,7,12,.52); backdrop-filter:blur(2.5px); -webkit-backdrop-filter:blur(2.5px); animation:fcfScrimIn .14s ease-out; }
@keyframes fcfScrimIn{ from{ opacity:0 } to{ opacity:1 } }

.fcfMenu{ --fc-accent2:#5aa9ff; position:fixed; z-index:2147483600; min-width:236px; max-width:310px; max-height:60vh; overflow:auto;
  /* A LIFTED surface, derived rather than hardcoded: mixing the panel toward the INK colour lightens
     it in a dark theme and darkens it in a light one, so the menu reads as raised either way and
     never depends on --fc-panel2 being defined. */
  background:linear-gradient(180deg, color-mix(in srgb, var(--fc-panel) 86%, var(--fc-ink) 14%), color-mix(in srgb, var(--fc-panel) 96%, var(--fc-ink) 4%));
  border:1px solid color-mix(in srgb, var(--fc-accent) 55%, var(--fc-line2));
  border-radius:12px; padding:6px;
  /* Three shadows doing three jobs: a crisp ring that survives any background, real elevation, and a
     soft accent bloom that ties the menu to the slot it belongs to. */
  box-shadow:0 0 0 1px rgba(0,0,0,.55),
             0 28px 64px -12px rgba(0,0,0,.7),
             0 0 34px -12px color-mix(in srgb, var(--fc-accent) 55%, transparent);
  transform-origin:top center; animation:fcfMenuIn .15s cubic-bezier(.2,.9,.3,1.2); }
@keyframes fcfMenuIn{ from{ opacity:0; transform:translateY(-6px) scale(.97) } to{ opacity:1; transform:none } }

/* A caret tying the panel to the slot that opened it. Its x is set inline from the anchor's centre;
   the fallback keeps it sensible if the menu had to be clamped to the viewport edge. */
/* The caret must match WHAT IS AT THE TOP OF THE MENU, which is the accent-tinted header band — not
   the panel underneath it. Filled with the panel colour it rendered as a dark notch above a lit bar,
   reading as a chipped corner rather than a pointer. This is the header's own composite: the lifted
   surface with the head's 9% accent wash over it. */
.fcfMenu::before{ content:''; position:absolute; top:-7px; left:var(--fcf-caret, 22px); width:12px; height:12px; transform:rotate(45deg);
  background:color-mix(in srgb, var(--fc-accent) 9%, color-mix(in srgb, var(--fc-panel) 86%, var(--fc-ink) 14%));
  border-left:1px solid color-mix(in srgb, var(--fc-accent) 55%, var(--fc-line2));
  border-top:1px solid color-mix(in srgb, var(--fc-accent) 55%, var(--fc-line2)); border-radius:2px 0 0 0; }
/* Flipped above the anchor, the caret sits at the BOTTOM of the panel — past the last item, where
   there is no header wash — so it takes the gradient's lower stop instead of the header composite. */
.fcfMenu--up::before{ top:auto; bottom:-7px; transform:rotate(225deg);
  background:color-mix(in srgb, var(--fc-panel) 96%, var(--fc-ink) 4%); }

.fcfMenuHead{ display:flex; align-items:center; gap:8px; padding:9px 10px 8px; font-family:var(--fc-mono);
  font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--fc-accent);
  border-bottom:1px solid color-mix(in srgb, var(--fc-accent) 22%, var(--fc-line2)); margin:-6px -6px 5px; padding-left:12px;
  background:color-mix(in srgb, var(--fc-accent) 9%, transparent); border-radius:11px 11px 0 0; }
.fcfMenuMeta{ padding:2px 10px 8px; font-family:var(--fc-mono); font-size:.58rem; letter-spacing:.06em; color:var(--fc-dim); }
.fcfMenuItem{ appearance:none; cursor:pointer; width:100%; display:flex; align-items:center; gap:9px; text-align:left; position:relative;
  padding:9px 10px 9px 12px; border-radius:8px; border:0; background:transparent; color:var(--fc-ink); font-size:.8rem;
  transition:background .12s ease, color .12s ease, transform .12s ease; }
/* A hovered row gets a filled ground AND an accent bar, so the highlight is unmissable rather than a
   faint tint — the previous 12% wash was invisible against the un-dimmed page. */
.fcfMenuItem::before{ content:''; position:absolute; left:3px; top:8px; bottom:8px; width:3px; border-radius:2px; background:transparent; transition:background .12s ease; }
.fcfMenuItem:hover{ background:color-mix(in srgb,var(--fc-accent) 20%, transparent); transform:translateX(1px); }
.fcfMenuItem:hover::before{ background:var(--fc-accent); }
.fcfMenuItem:active{ background:color-mix(in srgb,var(--fc-accent) 30%, transparent); transform:translateX(1px) scale(.995); }
/* Keyboard parity: the same affordance a mouse gets, since these are real buttons and tabbable. */
.fcfMenuItem:focus-visible{ outline:2px solid var(--fc-accent); outline-offset:-2px; background:color-mix(in srgb,var(--fc-accent) 20%, transparent); }
.fcfMenuItem:focus-visible::before{ background:var(--fc-accent); }
.fcfMenuItem em{ margin-left:auto; font-style:normal; font-family:var(--fc-mono); font-size:.54rem; color:var(--fc-dim); letter-spacing:.06em; }
.fcfMenuItem--del{ color:var(--fc-bad); }
.fcfMenuItem--del:hover{ background:color-mix(in srgb,var(--fc-bad) 20%, transparent); }
.fcfMenuItem--del:hover::before{ background:var(--fc-bad); }
.fcfMenuItem--del:focus-visible{ outline-color:var(--fc-bad); background:color-mix(in srgb,var(--fc-bad) 20%, transparent); }
.fcfMenuEmpty{ padding:12px 10px; font-size:.76rem; color:var(--fc-dim); line-height:1.5; }

/* THE DETAIL CARD reuses .fcfMenu for its item/head styling but supplies its own chrome inline
   (transparent, no border, no shadow) because it wraps a full Live Ops bay card and centres itself in
   its own overlay. Two things therefore have to be undone rather than inherited:
     — the caret, which is drawn on a pseudo-element and so survives `border:none` on the element,
       leaving a triangle floating beside a card that has no panel for it to belong to;
     — the width clamp. The card asks for `width:min(460px,94vw)` inline, but max-width beats width,
       so .fcfMenu's 300px cap silently squeezed it to two thirds of its intended size. That predates
       this work; it is fixed here because it is the same popup. */
.fcfMenu--card{ min-width:0; max-width:none; max-height:none; }
.fcfMenu--card::before{ content:none; }

/* Motion is decoration here; the surface, edge and backdrop carry the meaning on their own. */
@media (prefers-reduced-motion: reduce){
  .fcfScrim, .fcfMenu{ animation:none; }
  .fcfMenuItem{ transition:none; }
  .fcfMenuItem:hover, .fcfMenuItem:active{ transform:none; }
}