/* stage.css — render surface, inside the isolated iframe. Self-contained: no qry-ui /
   Shoelace cascade reaches here (that's the whole point of the iframe). A few brand
   colours are inlined so the iframe needs no token stylesheet. */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
:root { --blue: #4e8f1f; --accent: 78, 143, 31; }   /* jexter green — stage chrome only; the role/overlay palette below stays its own colors */

/* Neutral grey that reads well in light AND dark — the parent pushes the theme
   (stage.setTheme → html.dark) since this isolated frame has no qry tokens. */
#stage { height: 100%; background: #dfe3e8; overflow: auto;
    display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px; }
html.dark #stage { background: #2b2f36; }

/* one page = a placeholder sized up front; its SVG renders lazily */
.pg-canvas { position: relative; flex: 0 0 auto; background: #fff;
    border: 1px solid rgba(0, 0, 0, .07); box-shadow: 0 6px 28px rgba(20, 28, 45, .16);
    transition: box-shadow .18s; }
.pg-canvas.current { box-shadow: 0 0 0 2px var(--blue), 0 12px 38px rgba(var(--accent), .20); }
.pg-canvas svg { display: block; width: 100%; height: 100%; }

.node { cursor: pointer; }
.sel-box { fill: none; stroke: var(--blue); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sel-box.hidden { display: none; }
.hl rect { fill: var(--blue); fill-opacity: .08; stroke: var(--blue); stroke-opacity: .55;
    stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }

/* Display layer toggles (driven by the parent via stage.setLayer) */
.svg-root.hide-clips [clip-path] { clip-path: none !important; }
.svg-root.hide-annots .layer-annots { display: none; }
.svg-root.hide-text .layer-text { display: none; }
.svg-root.hide-paths .layer-paths { display: none; }
.svg-root.hide-images .layer-images { display: none; }
.layer-annots rect { fill: var(--blue); fill-opacity: .05; stroke: var(--blue);
    stroke-opacity: .45; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* slim accent scrollbars */
#stage::-webkit-scrollbar { width: 10px; height: 10px; }
#stage::-webkit-scrollbar-thumb { background: rgba(var(--accent), .28); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
#stage::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent), .45); background-clip: padding-box; }
#stage::-webkit-scrollbar-track { background: transparent; }

/* Welcome / landing (shown by the stage when no document is open) */
.jx-welcome { align-self: center; margin: auto; box-sizing: border-box;
    width: min(560px, 86%); aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 7% 9% 6%; color: #fff; border-radius: 22px;
    background: radial-gradient(130% 95% at 50% -8%, #6fb52e, transparent 58%), linear-gradient(165deg, var(--blue), #27420f);
    box-shadow: 0 26px 72px rgba(18, 40, 8, .42); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.jx-welcome .w-logo { width: 36%; max-width: 168px; }
.jx-welcome .w-title { font-size: 2.05rem; font-weight: 800; letter-spacing: -.015em; margin-top: .55rem; color: #fff; }
.jx-welcome .w-tag { font-size: .92rem; opacity: .9; margin-top: .4rem; }
.jx-welcome .w-formats { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; margin-top: .85rem; }
.jx-welcome .w-formats span { font-size: .63rem; font-weight: 600; letter-spacing: .07em; padding: .22rem .55rem;
    border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); }
.jx-welcome .w-rule { width: 58%; height: 1px; background: rgba(255, 255, 255, .3); margin: 7% 0 6%; }
.jx-welcome .w-steps { display: flex; flex-direction: column; gap: .55rem; font-size: .84rem; opacity: .95; }
.jx-welcome .w-foot { margin-top: auto; font-size: .72rem; opacity: .7; }

/* Inspect — display boxes overlay: paragraphs (tinted fill + role label), images & figures (border box) */
.para-ov { pointer-events: none; }
.disp-box { pointer-events: all; cursor: pointer; vector-effect: non-scaling-stroke; }
.para-ov .para-box { stroke-width: 1; opacity: .85; }                 /* fill tint comes from the role classes below */
.para-ov .img-box  { fill: none; stroke: #5b6573; stroke-width: 1.1; stroke-dasharray: 4 3; opacity: .85; }
.para-ov .fig-box  { fill: none; stroke: #0d9aa0; stroke-width: 1.2; stroke-dasharray: 5 3; opacity: .85; }
.para-ov .grp-box  { pointer-events: none; stroke-width: 1.3; stroke-dasharray: 5 3; opacity: .92; }   /* collapsed figure / table unit — hover passes through to the grouping node beneath */
.para-ov .grp-box.r-f { stroke: #0d9aa0; fill: rgba(13, 154, 160, .05); }
.para-ov .grp-box.r-t { stroke: #c9740a; fill: rgba(201, 116, 10, .06); }
html.dark .para-ov .grp-box.r-f { stroke: #2bc4cb; }
html.dark .para-ov .grp-box.r-t { stroke: #e8962f; }
.para-ov .disp-box:hover { opacity: 1; stroke-width: 1.7; }
.para-ov .hf-zone { fill: rgba(100, 116, 139, .08); stroke: #64748b; stroke-width: 1; stroke-dasharray: 6 3; opacity: .9; pointer-events: none; }
.para-ov .hf-lbl  { font: 700 7px ui-monospace, "SF Mono", Menlo, monospace; fill: #64748b; pointer-events: none; text-transform: uppercase; letter-spacing: .04em; }
html.dark .para-ov .hf-zone { fill: rgba(148, 163, 184, .10); stroke: #94a3b8; }
html.dark .para-ov .hf-lbl  { fill: #b6c2d2; }
.para-ov .para-lbl { font: 700 7px ui-monospace, "SF Mono", Menlo, monospace; pointer-events: none;
                     paint-order: stroke; stroke: #ffffff; stroke-width: 2.4px; stroke-linejoin: round; }
html.dark .para-ov .para-lbl { stroke: #0b1119; }
html.dark .para-ov .img-box  { stroke: #94a3b8; }
/* role colors — paragraph (blue), heading (red), list (green), table (amber), figure-role (teal), caption (grey), other (violet) */
.para-box.r-p { stroke: #0050be; fill: rgba(0, 80, 190, .07); }    .para-lbl.r-p { fill: #0050be; }
.para-box.r-h { stroke: #d12f2f; fill: rgba(209, 47, 47, .07); }   .para-lbl.r-h { fill: #d12f2f; }
.para-box.r-l { stroke: #1a9e54; fill: rgba(26, 158, 84, .07); }   .para-lbl.r-l { fill: #1a9e54; }
.para-box.r-t { stroke: #c9740a; fill: rgba(201, 116, 10, .08); }  .para-lbl.r-t { fill: #c9740a; }
.para-box.r-f { stroke: #0d9aa0; fill: rgba(13, 154, 160, .07); }  .para-lbl.r-f { fill: #0d9aa0; }
.para-box.r-c { stroke: #8a8f98; fill: rgba(138, 143, 152, .08); } .para-lbl.r-c { fill: #8a8f98; }
.para-box.r-o { stroke: #8a3ffc; fill: rgba(138, 63, 252, .07); }  .para-lbl.r-o { fill: #8a3ffc; }
html.dark .para-box.r-p { stroke: #5aa2ff; fill: rgba(90, 162, 255, .10); } html.dark .para-lbl.r-p { fill: #9cc4ff; }
html.dark .para-box.r-h { stroke: #ff7a7a; fill: rgba(255, 122, 122, .10); } html.dark .para-lbl.r-h { fill: #ff9d9d; }
html.dark .para-box.r-l { stroke: #46d98a; fill: rgba(70, 217, 138, .10); } html.dark .para-lbl.r-l { fill: #7fe6ad; }

/* Inspect — multi-selection boxes (extra nodes selected in the tree) */
.sel-ov { pointer-events: none; }
.sel-ov .msel-box { fill: #0050be; fill-opacity: .10; stroke: #0050be; stroke-opacity: .8;
                    stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
html.dark .sel-ov .msel-box { fill: #5aa2ff; stroke: #5aa2ff; }

/* Inspect — hover emphasis: bounding box of the paragraph / image / figure under the cursor */
.hover-ov { pointer-events: none; }
.hover-ov .hover-box { fill: rgba(0, 80, 190, .05); stroke: #0050be; stroke-width: 2; vector-effect: non-scaling-stroke; }
.hover-ov .hover-lbl { font: 800 11px ui-monospace, "SF Mono", Menlo, monospace; fill: #0050be;
                       paint-order: stroke; stroke: #ffffff; stroke-width: 3.2px; stroke-linejoin: round; }
.hover-box.r-h { stroke: #d12f2f; }  .hover-lbl.r-h { fill: #d12f2f; }
.hover-box.r-l { stroke: #1a9e54; }  .hover-lbl.r-l { fill: #1a9e54; }
.hover-box.r-t { stroke: #c9740a; fill: rgba(201, 116, 10, .06); }  .hover-lbl.r-t { fill: #c9740a; }
.hover-box.r-f { stroke: #0d9aa0; }  .hover-lbl.r-f { fill: #0d9aa0; }
.hover-box.r-c { stroke: #8a8f98; }  .hover-lbl.r-c { fill: #8a8f98; }
.hover-box.r-o { stroke: #8a3ffc; }  .hover-lbl.r-o { fill: #8a3ffc; }
.hover-box.r-x { stroke: #0050be; fill: rgba(0, 80, 190, .04); }   /* image / figure: neutral accent */
html.dark .hover-ov .hover-box { stroke: #5aa2ff; fill: rgba(90, 162, 255, .07); }
html.dark .hover-ov .hover-lbl { fill: #9cc4ff; stroke: #0b1119; }
html.dark .hover-box.r-h { stroke: #ff7a7a; } html.dark .hover-lbl.r-h { fill: #ff9d9d; }
html.dark .hover-box.r-l { stroke: #46d98a; } html.dark .hover-lbl.r-l { fill: #7fe6ad; }

/* Reading order overlay: numbered flow path through the page's top-level blocks (XY-Cut+ order) */
.ro-ov { pointer-events: none; }
.ro-ov .ro-box  { fill: rgba(78, 143, 31, .05); stroke: var(--blue); stroke-width: .8; vector-effect: non-scaling-stroke; opacity: .45; }
.ro-ov .ro-path { fill: none; stroke: var(--blue); stroke-width: 1.4; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; opacity: .75; }
.ro-ov .ro-badge circle { fill: var(--blue); }
.ro-ov .ro-badge text   { fill: #ffffff; font: 700 8px ui-monospace, "SF Mono", Menlo, monospace; text-anchor: middle; }
html.dark .ro-ov .ro-box  { stroke: var(--blue); fill: rgba(116, 183, 62, .07); }
html.dark .ro-ov .ro-path { stroke: var(--blue); }
html.dark .ro-ov .ro-badge circle { fill: var(--blue); }

/* ── Analysis pipeline layer (engine /api/convert?to=stages) — one stage at a time over the page ── */
.an-ov { pointer-events: none; }
.an-box { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.an-ov .an-runs   { stroke: #8a8f98; fill: rgba(138, 143, 152, .05); }
.an-ov .an-lines  { stroke: #0d9aa0; fill: rgba(13, 154, 160, .06); }
.an-ov .an-leaves { stroke: #c9740a; fill: rgba(201, 116, 10, .06); }
.an-ov .an-blocks { stroke: #0050be; fill: rgba(0, 80, 190, .06); }
.an-ov .an-box.r-h { stroke: #d12f2f; fill: rgba(209, 47, 47, .07); }
.an-ov .an-box.r-p { stroke: #0050be; fill: rgba(0, 80, 190, .06); }
.an-ov .an-box.r-f { stroke: #8a8f98; fill: rgba(138, 143, 152, .06); stroke-dasharray: 4 3; }
.an-ov .an-flow { fill: none; stroke: #0050be; stroke-width: 1.2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; opacity: .5; }
.an-ov .an-badge circle { fill: #0050be; }
.an-ov .an-badge text { fill: #fff; font: 700 8px ui-monospace, "SF Mono", Menlo, monospace; text-anchor: middle; }
html.dark .an-ov .an-runs   { stroke: #b6bcc6; }
html.dark .an-ov .an-lines  { stroke: #2bc4cb; }
html.dark .an-ov .an-leaves { stroke: #e8962f; }
html.dark .an-ov .an-blocks,
html.dark .an-ov .an-box.r-p { stroke: #5aa2ff; fill: rgba(90, 162, 255, .09); }
html.dark .an-ov .an-box.r-h { stroke: #ff7a7a; fill: rgba(255, 122, 122, .10); }
html.dark .an-ov .an-flow { stroke: #5aa2ff; }
html.dark .an-ov .an-badge circle { fill: #2f6fd6; }