/* FV-CMS-VENDORED v0.7.2 — DO NOT EDIT IN PLACE. Source: github.com/avidtech6/freshvibe-cms. To update, run: fvcms-update */
/* Oscar Panel Manager v2 — docks + panels */

/* ---------- root container ---------- */
.oscar-dock-root {
  position: fixed;
  inset: 0;
  pointer-events: none;  /* most things inside re-enable */
  z-index: 2147483646;
}

/* ---------- dock strip (transparent — pills are the only visible part) ---------- */
.fvcms-dock {
  position: fixed;
  background: transparent;
  display: flex;
  /* Pills start below the panel header (which is ~46px tall) so they
     don't overlap the panel's green header bar. */
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  padding: 56px 4px 6px 4px;
  pointer-events: auto;
  box-shadow: none;
  border: none;
}
/* Pills sit flush against the dock edge — no inner padding
   between pill and viewport boundary. */
.oscar-dock-left {
  padding-left: 0 !important;
}
.oscar-dock-right {
  padding-right: 0 !important;
}
.oscar-dock-top {
  padding-top: 0 !important;
}
.oscar-dock-bottom {
  padding-bottom: 0 !important;
}
/* On mobile: hide the dock background, only pills show */
@media (max-width: 600px) {
  .fvcms-dock {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    /* Allow taps to pass through the empty space between pills */
    pointer-events: none;
  }
  .oscar-dock-pill {
    pointer-events: auto;
  }
  /* On mobile: don't hide the pill label — keep it visible
     (label opacity stays at 1 instead of being hidden by the
     default parked state). Pills stay slim vertical tabs as
     on desktop. */
  .oscar-dock-left .oscar-dock-pill .oscar-dock-pill-label,
  .oscar-dock-right .oscar-dock-pill .oscar-dock-pill-label {
    opacity: 1 !important;
  }
  /* Mobile: pills have no border-radius (they sit flush against
     the viewport edge — there's no screen to "round into"). */
  .oscar-dock-left .oscar-dock-pill,
  .oscar-dock-right .oscar-dock-pill,
  .oscar-dock-top .oscar-dock-pill,
  .oscar-dock-bottom .oscar-dock-pill,
  .oscar-dock-left .oscar-dock-pill.focused,
  .oscar-dock-left .oscar-dock-pill.in-play,
  .oscar-dock-right .oscar-dock-pill.focused,
  .oscar-dock-right .oscar-dock-pill.in-play,
  .oscar-dock-top .oscar-dock-pill.focused,
  .oscar-dock-top .oscar-dock-pill.in-play,
  .oscar-dock-bottom .oscar-dock-pill.focused,
  .oscar-dock-bottom .oscar-dock-pill.in-play {
    border-radius: 0 !important;
  }
}
/* Mobile: floating panel is <50% wide, fits content height.
   Per operator 2026-07-27 02:24: 'on mobile make the panel width less
   than 50% the height to fit content'. */
@media (max-width: 600px) {
  .oscar-pm-panel.oscar-pm-floating {
    /* Width capped at 45% of viewport on initial load. The
       !important prevents the inline JS-set width from being
       respected, but we need that for the resize handle. The
       compromise: max-width is the default, but the operator
       can drag wider. Use min() so the user can override. */
    max-width: min(45vw, 100%);
    /* Height: fit-content by default. When the user has
       manually resized (fvcms-resized class), let the inline
       height take effect so the resize actually works. */
    min-height: 0 !important;
  }
  /* Default (not user-resized): fit-content height. */
  .oscar-pm-panel.oscar-pm-floating:not(.fvcms-resized) {
    height: auto !important;
  }
  /* Allow the user to drag wider than 45vw by lifting the cap
     when the panel has been manually resized. */
  .oscar-pm-panel.oscar-pm-floating.fvcms-resized {
    max-width: 90vw;
  }
  .oscar-pm-panel.oscar-pm-floating .oscar-pm-body {
    /* Body shrinks to content. The CSS has overflow:auto on the
       body so any overflow still scrolls. */
    height: auto !important;
    max-height: 70vh;
    overflow-y: auto;
  }
  /* Resize handle stays visible on mobile (operator complaint
     2026-07-27 18:00 'I can't resize the panel'). The handle is
     32x32 for finger-tap targets and at the bottom-right corner.
     When the panel is at 45vw, the handle is the only way to
     widen it back to 50vw+ for content that needs more room. */
  .oscar-pm-panel.oscar-pm-floating .oscar-pm-resize {
    display: block;
    width: 32px;
    height: 32px;
  }
}
.oscar-dock-left {
  left: 0;
  top: 0;
  bottom: 0;
  width: 16px;  /* matches unslimmed pill width */
  flex-direction: column;
}
.oscar-dock-right {
  right: 0;
  top: 0;
  bottom: 0;
  width: 16px;  /* matches unslimmed pill width */
  flex-direction: column;
}
.oscar-dock-top {
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
}
.oscar-dock-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 44px;
}
@media (max-width: 600px) {
  /* Mobile: dock has no visible body, pills sit flush against the
     viewport edge (no inset) */
  .oscar-dock-left { left: 0; width: auto; border-right: none; }
  .oscar-dock-right { right: 0; width: auto; border-left: none; }
  .oscar-dock-top { top: 0; height: auto; border-bottom: none; }
  .oscar-dock-bottom { bottom: 0; height: auto; border-top: none; }
  /* Bigger touch target for all 4 corner handles on mobile
     (18px is too small for a finger). */
  .oscar-pm-panel[data-state="floating"] .oscar-pm-resize {
    width: 32px !important;
    height: 32px !important;
  }
  /* Pills get a subtle drop shadow since they float now */
  .oscar-dock-pill {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
  }
}

/* ---------- pills (parked off-screen by default, slide into view on hover) ---------- */
.oscar-dock-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(60, 60, 68, 0.95);
  color: #fff;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.3px;
  padding: 8px 4px;
  border-radius: 6px;
  cursor: grab;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.12s ease,
              background 0.18s ease,
              filter 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  will-change: transform;
}

/* Panel-type-specific default colours so operators can tell at a
   glance which dock slot belongs to which kind of panel. */
.oscar-dock-pill[data-pm-panel-id="fvcms-cms-panel"] {
  background: rgba(46, 60, 50, 0.95);     /* CMS — deep forest */
  border: 1px solid rgba(140, 180, 140, 0.5);
}
.oscar-dock-pill[data-pm-panel-id^="fvcms-region-"] {
  background: rgba(118, 96, 158, 0.95);   /* Region — soft purple */
  border: 1px solid rgba(180, 160, 220, 0.55);
}
.oscar-dock-pill[data-pm-panel-id^="fvcms-edit-"] {
  background: rgba(170, 132, 60, 0.95);   /* Editor — muted amber */
  border: 1px solid rgba(220, 180, 110, 0.55);
}

.oscar-dock-pill:hover,
.oscar-dock-pill:focus-visible,
.oscar-dock-pill:active {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  filter: brightness(1.18);
}
.oscar-dock-pill.focused {
  background: rgba(255, 220, 100, 1) !important;
  color: #1a1a1a;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  /* Subtle inner ring only. No outer drop shadow — that was making
     the pill's visual extent much wider than its 45px layout
     width, making it look ~77px wide and confusing the operator. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}
/* In-play but not focused: softer amber. The panel is still shown
   full, but it's a sibling — the operator's typing focus is
   elsewhere. */
.oscar-dock-pill.in-play {
  background: rgba(200, 150, 70, 0.9) !important;
  color: #fff8e8;
  font-weight: 600;
  border: 1px solid rgba(220, 180, 110, 0.55) !important;
  /* No outer drop shadow — keeps the pill's visual extent close
     to its 45px layout width. */
  box-shadow: none;
}
/* When a pill is in-play, it sits flush against the viewport edge.
   Remove the border-radius on the side that meets the edge so the
   pill looks like it grows out of the page boundary, not stuck on
   top of it. (Same applies for both .focused and .in-play.) */
.oscar-dock-left .oscar-dock-pill.focused,
.oscar-dock-left .oscar-dock-pill.in-play {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
  padding-left: 5px;
}
.oscar-dock-right .oscar-dock-pill.focused,
.oscar-dock-right .oscar-dock-pill.in-play {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
  padding-right: 5px;
}
.oscar-dock-top .oscar-dock-pill.focused,
.oscar-dock-top .oscar-dock-pill.in-play {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
  padding-top: 5px;
}
.oscar-dock-bottom .oscar-dock-pill.focused,
.oscar-dock-bottom .oscar-dock-pill.in-play {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  padding-bottom: 5px;
}

/* Vertical pills on left/right docks — full size, but parked
   off-screen by default. On hover, focus, or active state, the
   pill slides back into the dock so the operator can see what
   it is. The dock itself stays 44px wide so neighbouring pills
   don't shift around. */
.oscar-dock-left .oscar-dock-pill,
.oscar-dock-right .oscar-dock-pill {
  /* Slimmed (default / parked) state: 12px wide. The label
     is hidden via opacity (see below). The pill expands to
     16px when the panel is in-play or focused. */
  width: 12px;
  height: auto;
  min-height: 80px;
  max-height: 200px;
  writing-mode: vertical-rl;  /* rotated text */
  text-orientation: mixed;
  padding: 12px 1px;
  transition: width 0.18s ease, padding 0.18s ease;
}
/* Unslimmed: in-play or focused panels get a wider pill so the
   label is comfortably visible. */
.oscar-dock-left .oscar-dock-pill.focused,
.oscar-dock-left .oscar-dock-pill.in-play,
.oscar-dock-right .oscar-dock-pill.focused,
.oscar-dock-right .oscar-dock-pill.in-play {
  width: 16px;
  padding: 12px 2px;
}
.oscar-dock-left .oscar-dock-pill {
  transform: translateX(0);  /* Always visible — minimised panels still
                                 keep their pill in the dock so the
                                 operator knows they're "in the system" */
}
.oscar-dock-right .oscar-dock-pill {
  transform: translateX(0);  /* Same: always visible */
}
.oscar-dock-left .oscar-dock-pill:hover,
.oscar-dock-right .oscar-dock-pill:hover,
.oscar-dock-left .oscar-dock-pill:focus-visible,
.oscar-dock-right .oscar-dock-pill:focus-visible,
.oscar-dock-left .oscar-dock-pill.active,
.oscar-dock-right .oscar-dock-pill.active,
.oscar-dock-left .oscar-dock-pill.focused,
.oscar-dock-right .oscar-dock-pill.focused,
.oscar-dock-left .oscar-dock-pill.in-play,
.oscar-dock-right .oscar-dock-pill.in-play {
  transform: translateX(0);      /* slide into view */
}
.oscar-dock-left .oscar-dock-pill .oscar-dock-pill-label,
.oscar-dock-right .oscar-dock-pill .oscar-dock-pill-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: inline-block;
  max-height: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;                 /* Per operator 2026-07-27 23:03: 'pills on
                                 the doc only show text on hover it
                                 should always show what it is'.
                                 The label is always visible now. */
  transition: opacity 0.18s ease;
}
.oscar-dock-left .oscar-dock-pill:hover .oscar-dock-pill-label,
.oscar-dock-right .oscar-dock-pill:hover .oscar-dock-pill-label,
.oscar-dock-left .oscar-dock-pill:focus-visible .oscar-dock-pill-label,
.oscar-dock-right .oscar-dock-pill:focus-visible .oscar-dock-pill-label,
.oscar-dock-left .oscar-dock-pill.focused .oscar-dock-pill-label,
.oscar-dock-right .oscar-dock-pill.focused .oscar-dock-pill-label,
.oscar-dock-left .oscar-dock-pill.in-play .oscar-dock-pill-label,
.oscar-dock-right .oscar-dock-pill.in-play .oscar-dock-pill-label {
  opacity: 1;
}
.oscar-dock-left .oscar-dock-pill .oscar-dock-pill-grip,
.oscar-dock-right .oscar-dock-pill .oscar-dock-pill-grip {
  /* Grip shown horizontally at the top of vertical pill */
  writing-mode: horizontal-tb;
  font-size: 11px;
  opacity: 0.85;
  margin-bottom: 4px;
  /* Tighten the gap between the two ⋮ columns so they read as
     one cohesive grip icon, not two columns of dots miles apart. */
  letter-spacing: -3px;
  text-indent: -1px;
  display: inline-block;
  transform: scaleX(0.85);
  transform-origin: center;
}

/* Horizontal pills on top/bottom docks — full size, parked
   off-screen by default. On hover, focus, or active, the pill
   slides into the dock. */
.oscar-dock-top .oscar-dock-pill,
.oscar-dock-bottom .oscar-dock-pill {
  height: 30px;
  padding: 4px 10px;
}
.oscar-dock-top .oscar-dock-pill {
  transform: translateY(-22px);   /* park upward, ~8px visible */
}
.oscar-dock-bottom .oscar-dock-pill {
  transform: translateY(22px);    /* park downward, ~8px visible */
}
.oscar-dock-top .oscar-dock-pill:hover,
.oscar-dock-bottom .oscar-dock-pill:hover,
.oscar-dock-top .oscar-dock-pill:focus-visible,
.oscar-dock-bottom .oscar-dock-pill:focus-visible,
.oscar-dock-top .oscar-dock-pill.active,
.oscar-dock-bottom .oscar-dock-pill.active,
.oscar-dock-top .oscar-dock-pill.focused,
.oscar-dock-bottom .oscar-dock-pill.focused,
.oscar-dock-top .oscar-dock-pill.in-play,
.oscar-dock-bottom .oscar-dock-pill.in-play {
  transform: translate(0, 0);
}
.oscar-dock-top .oscar-dock-pill .oscar-dock-pill-label,
.oscar-dock-bottom .oscar-dock-pill .oscar-dock-pill-label {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;                 /* Always show the label - per operator
                                 2026-07-27 23:03 'pills on the doc
                                 only show text on hover it should
                                 always show what it is' */
  transition: opacity 0.18s ease;
}
.oscar-dock-top .oscar-dock-pill:hover .oscar-dock-pill-label,
.oscar-dock-bottom .oscar-dock-pill:hover .oscar-dock-pill-label,
.oscar-dock-top .oscar-dock-pill:focus-visible .oscar-dock-pill-label,
.oscar-dock-bottom .oscar-dock-pill:focus-visible .oscar-dock-pill-label,
.oscar-dock-top .oscar-dock-pill.active .oscar-dock-pill-label,
.oscar-dock-bottom .oscar-dock-pill.active .oscar-dock-pill-label,
.oscar-dock-top .oscar-dock-pill.focused .oscar-dock-pill-label,
.oscar-dock-bottom .oscar-dock-pill.focused .oscar-dock-pill-label,
.oscar-dock-top .oscar-dock-pill.in-play .oscar-dock-pill-label,
.oscar-dock-bottom .oscar-dock-pill.in-play .oscar-dock-pill-label {
  opacity: 1;
}

/* ---------- panel DOM ---------- */
.oscar-pm-panel {
  position: fixed;
  background: rgba(20, 28, 20, 0.97);
  color: #e8e8e0;
  font: 12px ui-monospace, Menlo, monospace;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(120, 160, 120, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Above region tags and the dev button, below the dock itself. */
  z-index: 2147483647;
  pointer-events: auto;
}

/* Docked panels: full height, no border radius (snaps cleanly to viewport edge) */
.oscar-pm-panel[data-state="docked-active"] {
  border-radius: 0;
  height: 100vh !important;
  max-height: 100vh !important;
}
.oscar-pm-panel[data-state="docked-active"] .oscar-pm-header {
  border-radius: 0;
}
.oscar-pm-header {
  padding: 10px 12px;
  background: rgba(45, 79, 45, 0.92);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  letter-spacing: 0.5px;
  user-select: none;
  cursor: grab;
  flex-shrink: 0;
  gap: 8px;
}
.oscar-pm-title {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: 13px;
}
/* Tag chip prefix: the first word in the title is the operator's tag
   (e.g. 'S-6', 'W-5'). Make it look like a chip. The title is the
   full text "S-6 · Section"; we use ::first-letter to nudge the
   tag visually, but the actual wrapping is in panel-manager.js
   (see the .oscar-pm-title-tag span around the tag prefix). */
.oscar-pm-title-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  padding: 1px 6px;
  margin-right: 8px;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  font-family: ui-monospace, Menlo, monospace;
}
.oscar-pm-title-label {
  opacity: 0.85;
}
.oscar-pm-controls {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.oscar-pm-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 14px;
  min-width: 26px;
  min-height: 26px;
  line-height: 1;
}
/* Dock-left and dock-right buttons only show on floating panels.
   Per operator 2026-07-27 23:05: 'on floating panels put a dock
   icon maybe a left side and a right side icon to dock left or
   right'. On docked panels the dock edge is already known, so
   these buttons would be redundant. */
.oscar-pm-panel:not(.oscar-pm-floating) .oscar-pm-dock-left,
.oscar-pm-panel:not(.oscar-pm-floating) .oscar-pm-dock-right {
  display: none;
}
.oscar-pm-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* 6-dot grip icon (2 columns × 3 rows) used for the detach button */
.oscar-pm-grip {
  display: inline-block;
  width: 7px;
  height: 11px;
  background-image:
    radial-gradient(circle, currentColor 1.1px, transparent 1.4px),
    radial-gradient(circle, currentColor 1.1px, transparent 1.4px);
  background-size: 3.5px 3.66px;
  background-position: 0 0, 3.5px 0;
  background-repeat: repeat;
  vertical-align: middle;
}
.oscar-pm-close:hover {
  background: rgba(220, 60, 60, 0.9);
  border-color: rgba(255, 80, 80, 1);
}
.oscar-pm-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 12px;
  min-height: 0;
  /* Kill ugly native scrollbars — scroll still works, just no chrome */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/old Edge */
  -webkit-overflow-scrolling: touch;
}
.oscar-pm-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                  /* WebKit / Blink */
}

/* Apply same scrollbar hiding to all descendants of a panel
   (checkboxes, list views, anything inside that might scroll) */
.oscar-pm-panel * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.oscar-pm-panel *::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ---------- snap hint (when dragging panel near edge) ---------- */
.fvcms-snap-hint {
  position: fixed;
  background: rgba(180, 140, 80, 0.85);
  pointer-events: none;
  z-index: 2147483644;
  display: none;
  box-shadow: 0 0 20px rgba(180, 140, 80, 0.6);
}
.fvcms-snap-hint-left {
  left: 0; top: 0; bottom: 0; width: 50px;
  border-right: 2px solid rgba(255, 220, 100, 1);
}
.fvcms-snap-hint-right {
  right: 0; top: 0; bottom: 0; width: 50px;
  border-left: 2px solid rgba(255, 220, 100, 1);
}
.fvcms-snap-hint-top {
  top: 0; left: 0; right: 0; height: 50px;
  border-bottom: 2px solid rgba(255, 220, 100, 1);
}
.fvcms-snap-hint-bottom {
  bottom: 0; left: 0; right: 0; height: 50px;
  border-top: 2px solid rgba(255, 220, 100, 1);
}
/* ---------- squeeze body padding when docked panel is in squeeze mode ---------- */
/* data-overlay-mode="1" means SQUEEZE mode is active (panel pushes page). */
/* Default (no attribute) = overlay mode (panel sits on top of page, no padding). */
body:has(.oscar-pm-panel[data-state="docked-active"][data-dock-edge="left"][data-overlay-mode="1"]) {
  padding-left: var(--oscar-pm-pinned-w, 0px) !important;
  transition: padding-left 0.2s ease;
}
body:has(.oscar-pm-panel[data-state="docked-active"][data-dock-edge="right"][data-overlay-mode="1"]) {
  padding-right: var(--oscar-pm-pinned-w, 0px) !important;
  transition: padding-right 0.2s ease;
}
body:has(.oscar-pm-panel[data-state="docked-active"][data-dock-edge="top"][data-overlay-mode="1"]) {
  padding-top: var(--oscar-pm-pinned-h, 0px) !important;
  transition: padding-top 0.2s ease;
}
body:has(.oscar-pm-panel[data-state="docked-active"][data-dock-edge="bottom"][data-overlay-mode="1"]) {
  padding-bottom: var(--oscar-pm-pinned-h, 0px) !important;
  transition: padding-bottom 0.2s ease;
}

/* Squeeze button visual feedback: highlighted when in squeeze mode */
.oscar-pm-squeeze[data-active="1"] {
  background: rgba(180, 140, 80, 0.6) !important;
  color: #fff !important;
}

/* On floating panels, only the close button + collapse button make sense.
   Squeeze and detach are dock-only operations.
   Collapse IS shown on floating — clicking it docks to the nearest edge. */
.oscar-pm-panel.oscar-pm-floating .oscar-pm-squeeze,
.oscar-pm-panel.oscar-pm-floating .oscar-pm-detach {
  display: none;
}

/* ---------- maximize state (operator clicked the ▣ button) ----------
   Per operator 2026-07-27 23:05: 'turn the 6 dot icon into a maximise
   button'. When data-maximized='1', the panel fills the viewport
   with an 8px margin on all sides so the operator can see they're
   in maximize mode. */
.oscar-pm-panel[data-maximized="1"] {
  width: calc(100vw - 16px) !important;
  height: calc(100vh - 16px) !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 100000 !important;
  left: 8px !important;
  top: 8px !important;
  right: auto !important;
  bottom: auto !important;
}

/* ---------- resize handle (on inner edge of docked panel) ---------- */
.oscar-pm-resize {
  position: absolute;
  z-index: 2;
  /* Default hidden; positioned by dock edge */
  display: none;
  background: transparent;
  transition: background 0.15s ease;
}
/* Show only when panel is docked-active OR floating */
.oscar-pm-panel[data-state="docked-active"] .oscar-pm-resize,
.oscar-pm-panel[data-state="floating"] .oscar-pm-resize {
  display: block;
}
/* Floating: 4 corner resize handles. Per operator 2026-07-27
   22:55 'I can't resize because the bottom-right corner is
   off-screen'. With 4 handles, the operator can grab whichever
   corner is visible. Each handle has its own data-corner attr. */
.oscar-pm-panel[data-state="floating"] .oscar-pm-resize {
  position: absolute;
  width: 18px;
  height: 18px;
  display: block;
  background: transparent;
  z-index: 3;
}
/* BR (bottom-right) - default corner */
.oscar-pm-panel[data-state="floating"] .oscar-pm-resize-br {
  right: 0;
  bottom: 0;
  cursor: nwse-resize;
  background-image:
    linear-gradient(135deg, transparent 0%, transparent 50%,
      rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 60%,
      transparent 60%, transparent 70%,
      rgba(255, 255, 255, 0.4) 70%, rgba(255, 255, 255, 0.4) 80%,
      transparent 80%);
}
/* BL (bottom-left) */
.oscar-pm-panel[data-state="floating"] .oscar-pm-resize-bl {
  left: 0;
  bottom: 0;
  cursor: nesw-resize;
  background-image:
    linear-gradient(225deg, transparent 0%, transparent 50%,
      rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 60%,
      transparent 60%, transparent 70%,
      rgba(255, 255, 255, 0.4) 70%, rgba(255, 255, 255, 0.4) 80%,
      transparent 80%);
}
/* TR (top-right) */
.oscar-pm-panel[data-state="floating"] .oscar-pm-resize-tr {
  right: 0;
  top: 0;
  cursor: nesw-resize;
  background-image:
    linear-gradient(45deg, transparent 0%, transparent 50%,
      rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 60%,
      transparent 60%, transparent 70%,
      rgba(255, 255, 255, 0.4) 70%, rgba(255, 255, 255, 0.4) 80%,
      transparent 80%);
}
/* TL (top-left) */
.oscar-pm-panel[data-state="floating"] .oscar-pm-resize-tl {
  left: 0;
  top: 0;
  cursor: nwse-resize;
  background-image:
    linear-gradient(315deg, transparent 0%, transparent 50%,
      rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 60%,
      transparent 60%, transparent 70%,
      rgba(255, 255, 255, 0.4) 70%, rgba(255, 255, 255, 0.4) 80%,
      transparent 80%);
}
/* Left dock: handle on RIGHT (inner) edge of panel */
.oscar-pm-panel[data-state="docked-active"][data-dock-edge="left"] .oscar-pm-resize {
  right: -6px;
  top: 0;
  bottom: 0;
  width: 12px;
  cursor: ew-resize;
}
/* Right dock: handle on LEFT (inner) edge */
.oscar-pm-panel[data-state="docked-active"][data-dock-edge="right"] .oscar-pm-resize {
  left: -6px;
  top: 0;
  bottom: 0;
  width: 12px;
  cursor: ew-resize;
}
/* Top dock: handle on BOTTOM (inner) edge */
.oscar-pm-panel[data-state="docked-active"][data-dock-edge="top"] .oscar-pm-resize {
  left: 0;
  right: 0;
  bottom: -6px;
  height: 12px;
  cursor: ns-resize;
}
/* Bottom dock: handle on TOP (inner) edge */
.oscar-pm-panel[data-state="docked-active"][data-dock-edge="bottom"] .oscar-pm-resize {
  left: 0;
  right: 0;
  top: -6px;
  height: 12px;
  cursor: ns-resize;
}
/* Gold tint on hover */
.oscar-pm-panel[data-state="docked-active"] .oscar-pm-resize:hover,
.oscar-pm-panel[data-state="floating"] .oscar-pm-resize:hover {
  background-color: rgba(180, 140, 80, 0.7);
  box-shadow: 0 0 8px rgba(180, 140, 80, 0.5);
}

/* Prevent horizontal page scroll when dock has docked panel that pushes
   page (squeeze) — elementor swiper duplicates overflow otherwise. */
html:has(.oscar-pm-panel[data-state="docked-active"]),
body:has(.oscar-pm-panel[data-state="docked-active"]) {
  overflow-x: hidden !important;
}

/* When multiple docks exist on perpendicular edges, offset them so
   pills on different edges don't visually overlap. */
body:has(.oscar-dock-left) .oscar-dock-top,
body:has(.oscar-dock-left) .oscar-dock-bottom {
  left: 50px;  /* clear the left dock area */
}
body:has(.oscar-dock-right) .oscar-dock-top,
body:has(.oscar-dock-right) .oscar-dock-bottom {
  right: 50px;
}
body:has(.oscar-dock-top) .oscar-dock-left,
body:has(.oscar-dock-top) .oscar-dock-right {
  top: 50px;
}
body:has(.oscar-dock-bottom) .oscar-dock-left,
body:has(.oscar-dock-bottom) .oscar-dock-right {
  bottom: 50px;
}


/* On mobile, docked panel is narrower so the operator can still
   see the webpage behind. The dock takes 44px on the panel edge;
   we want the panel to occupy about 78% of the viewport width
   (e.g. ~300px on a 390px phone), leaving a slice of the page
   visible on the opposite side. */
@media (max-width: 600px) {
  /* Mobile: panels are always floating (state=floating, not
     docked-active). The default opening size is 50vw × 50vh so
     the operator can always see the page behind — but the
     operator can resize freely via the bottom-right handle.
     Inline style set by JS during resize overrides these
     defaults (no !important). */
  .oscar-pm-panel[data-state="floating"] {
    width: 50vw;
    /* Per operator 2026-07-27 12:24 'make the panel width less than
       50%'. min-width 0 (no floor) so the 45vw max-width on
       .oscar-pm-panel.oscar-pm-floating wins, otherwise the panel
       would be clamped to 240px on a 390px-wide phone. */
    min-width: 0;
    border-radius: 10px;
  }
  /* Fade in animation only on the FIRST time a panel becomes
     floating on mobile. We use a JS-added class so the animation
     only runs once per panel per session, not every drag. */
  .oscar-pm-panel.fvcms-mobile-fadein-once {
    animation: fvcms-mobile-fadein 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes fvcms-mobile-fadein {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* Mobile: only the currently-focused panel shows its body.
     Pills stay visible (the operator needs them to switch panels)
     but the panel bodies are stacked in a single visible slot. */
  .oscar-pm-panel[data-state="docked-active"]:not([data-focused="1"]),
  .oscar-pm-panel[data-state="floating"]:not([data-focused="1"]) {
    display: none !important;
  }
  /* Background preset swatch row: wrap on narrow panels. */
  .fvcms-region-field > div[style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  .fvcms-region-field button.fvcms-bg-preset {
    flex: 0 0 auto !important;
    min-width: 50px !important;
    font-size: 8px !important;
    padding: 3px 5px !important;
  }
}

/* Region editor UI (inside region panels) */
.fvcms-region-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fvcms-region-editor-section {
  border-left: 2px solid rgba(180, 140, 80, 0.5);
  padding-left: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.fvcms-region-editor-head {
  font-size: 11px;
  color: #c0e0c0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.fvcms-region-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  color: #b0c0b0;
}
.fvcms-region-field label {
  font-weight: 600;
  font-size: 10px;
}

/* Editor panel body — Fields / Variants / Raw JSON tabs */
.fvcms-editor-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  font: 12px ui-monospace, monospace;
  color: #e8e8e0;
}
.fvcms-editor-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #b0c0b0;
  margin-bottom: 10px;
}
.fvcms-editor-tab-content {
  display: block;
}
.fvcms-tab-active {
  color: #c0e0c0 !important;
  border-bottom-color: rgba(120, 180, 120, 0.7) !important;
}

/* Mobile: docked panels look the same as floating panels
   (centred, 50vw wide, fit content, 90vh max).
   Per operator 2026-07-30 feedback: dock-to-left and dock-to-right
   must actually dock on mobile, not auto-float. The JS now does
   real docking on mobile; this CSS makes the docked panel look
   like the old "floating on mobile" box so the UX stays clean. */
@media (max-width: 600px) {
  .oscar-pm-panel[data-state="docked-active"][data-dock-edge="left"],
  .oscar-pm-panel[data-state="docked-active"][data-dock-edge="right"] {
    width: 50vw;
    min-width: 0;
    border-radius: 10px;
    max-height: 90vh;
  }
  /* On mobile, dock-active panels float in the middle of the screen.
     This matches the old "always float on mobile" UX but the panel
     state is now docked-active (not floating) so the pill dock
     works correctly. */
  .oscar-pm-panel[data-state="docked-active"] {
    position: fixed !important;
    top: 80px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}