/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */


.popover{
  max-width:100%;
}

/*
DEAD unless we bring back using the html img tag.

#annotatedPage {
    position:relative; display:inline-block;
}

#annotatedPage > svg {
    position:absolute; top:0; left:0;
}
*/

text.warning {
  fill: red;
}

/* ------------------------------------------------------------------ */
/* --- Group Frame --------------------------------------------------- */
/* ------------------------------------------------------------------ */

svg.group > rect.group-frame {
  fill-opacity: 10%;
  stroke-width:4;
  stroke:yellow;
  display: none;
}

/** Shadow the frame surrounding the hovered group */
svg.group > rect.group-frame:hover {
  stroke:orange;
}

/** Shadow the group for the hovered box */
svg.group:has(> .box:hover) rect.group-frame {
  stroke:orange;
  display: inline;
}

/** Highlight the frame surrounding the active group */
svg.group:has(> .box.active) > rect.group-frame {
  stroke:orange;
}

/*.group:has(> .box.active) > rect.group-frame:hover {
  stroke:orange;
}*/


/* ------------------------------------------------------------------ */
/* --- Box ---------------------------------------------------------- */
/* ------------------------------------------------------------------ */

svg.box {
  overflow: visible;
}

svg.box > rect.frame {
    fill-opacity: 0%;
    stroke-width: 4;
    /*stroke:grey;*/
    visibility: visible;
    pointer-events: all;
    margin: 5px;
}

svg.box.ref > rect.frame {
  stroke:grey;
}


svg.group.active > svg.box > rect.frame {
  stroke-width:6;
  /*stroke:green;*/
  visibility: visible;
}

svg.group:not(.active) > svg.box.highlight > rect.frame {
  stroke: purple;
}

svg.group:not(.active) > svg.box.multi > rect.frame {
  stroke: red;
}

#annotatedPage:not(.drag-in-progress) svg.group:not(.active):has(> .box:hover) > svg.box > rect.frame {
  visibility: visible;
  /*stroke: purple;*/
  stroke-width:10;
  visibility: visible;
}

svg.box > circle.grabber {
  fill-opacity: 10%;
  stroke-width:3;
  stroke:red;
  overflow: visible;
  display: none;
}

#annotatedPage:not(.drag-in-progress) svg.box:not(.ref):hover > circle.grabber {
  display: inline;
}

svg.box.active:(not .ref) circle {
  display: inline;
}

/*svg.box circle.grabber.active {
  stroke: purple;
}*/

/* .group circle.grabber { */
/*   fill-opacity: 10%; */
/*   stroke-width:3; */
/*   stroke:red; */
/*   overflow: visible; */
/*   display: none; */
/* } */

/* .group svg.box:hover circle.grabber { */
/*   display: inline; */
/* } */

.group.LINE > rect.frame {
    stroke:blue;
    stroke-width:6;
}

.group:hover > rect.frame {
    stroke:red !important;
}

.group.active > rect.frame {
    stroke-width:3;
    stroke:purple;
}

/* ------------------------------------------------------------------ */
/* --- Context menu WIP --------------------------------------------- */
/* ------------------------------------------------------------------ */
.context-menu {
}

.context-menu > rect.frame {
    stroke-width:3;
    stroke:purple;
}

.context-menu > svg.items > svg > rect {
    fill-opacity: 30%;
    fill: blue;
}

.context-menu > svg.items > svg:hover > rect {
    fill-opacity: 30%;
    fill: yellow;
}

.context-menu > svg.items > svg > text {
    font: bold 20px sans-serif;
    fill: red;
    stroke: red;
}

/* ------------------------------------------------------------------ */
/* --- Page word sidebar + hover tooltip (page-editor-change.md) ---- */
/* ------------------------------------------------------------------ */

.pe-layout { display: flex; gap: .75rem; align-items: flex-start; }
.pe-main { flex: 1 1 auto; min-width: 0; }

/* The page SVG shares the row with the sidebar: fill whatever width is
   left (shrinking beside the open sidebar, expanding when it collapses).
   Safe because the client computes the screen->page coordinate ratio from
   LIVE geometry (viewBox / rendered width), not the static scale factor.
   The locked/popup single-group editor has no .pe-main and keeps its
   fixed-size render. */
.pe-main #scanned-page { width: 100%; height: auto; }

.pe-sidebar { flex: 0 0 20rem; position: sticky; top: 0; max-height: 100vh;
              overflow-y: auto; font-size: .9rem; padding: 0 .5rem .5rem;
              border-left: 1px solid #ddd; }
.pe-sidebar-head { display: flex; align-items: center; gap: .5rem;
                   position: sticky; top: 0; background: #fff;
                   padding: .3rem 0; }
.pe-sidebar-title { font-weight: 600; }
.pe-sidebar-toggle { border: 1px solid #ccc; background: #f8f8f8;
                     border-radius: .25rem; cursor: pointer; line-height: 1.1; }
.pe-sidebar-list { list-style: none; margin: 0; padding: 0; }
.pe-sidebar-list > li.pe-word { padding: .15rem .25rem; border-radius: .25rem; }
.pe-sidebar-list > li.pe-word:hover,
.pe-sidebar-list > li.pe-word.pe-hl { background: #fff3cd; }
.pe-sidebar-subhead { margin-top: .5rem; font-weight: 600; color: #666; }
li.pe-untagged { color: #888; }

/* collapsed to a thin rail (state remembered by the client) */
.pe-sidebar.pe-collapsed { flex-basis: 2.4rem; }
.pe-sidebar.pe-collapsed .pe-sidebar-title,
.pe-sidebar.pe-collapsed .pe-sidebar-list { display: none; }

/* page-side highlight, driven from sidebar-row hover: light the group's
   MEMBER BOXES (exact even where group frames interleave), and show the
   frame too */
#annotatedPage svg.group.pe-hl > rect.group-frame { display: inline; stroke: orange; }
#annotatedPage svg.group.pe-hl > svg.box > rect.frame { stroke-width: 10; visibility: visible; }

/* the cursor-following word-summary tooltip; suppressed during drags */
.pe-hover-tip { position: fixed; z-index: 1090; background: #fff;
                border: 1px solid #aaa; border-radius: .25rem;
                box-shadow: 0 2px 6px rgba(0,0,0,.25);
                padding: .25rem .5rem; max-width: 26rem;
                pointer-events: none; font-size: .9rem; }
.pe-hover-tip .lm-edit-pencil { display: none; } /* row clone: pencil is noise here */
.pe-layout:has(.drag-in-progress) .pe-hover-tip { display: none !important; }

/* the right-click menu (shared .ContextMenu look; above the tooltip) */
.pe-context-menu { z-index: 1100; }
.pe-context-menu .pe-menu-disabled { color: #999; cursor: default; }

/* the gesture/key reference at the bottom of the editor */
.pe-help { margin: 1.5rem 0; max-width: 46rem; font-size: .9rem; color: #444; }
.pe-help h5 { margin-bottom: .5rem; }
.pe-help th { text-align: left; font-weight: 600; padding: .1rem 1rem .1rem 0;
              white-space: nowrap; vertical-align: top; }
.pe-help td { padding: .1rem 0; }

/* ------------------------------------------------------------------ */
/* --- Page Jump Feature -------------------------------------------- */
/* ------------------------------------------------------------------ */

.page-jump, .current-page-jump {
  text-decoration: none;
  color: black;
}

.current-page-jump {
  color: red;
}

.current-page-jump::before {
  font-weight: bold;
  color: navy;
  content: "[";
}

.current-page-jump::after {
  font-weight: bold;
  color: navy;
  content: "]";
}