/* jexlab.css — Jexter Lab shell (the chrome around the isolated render stage iframe).
   Built on qry-ui tokens (--qry-*), dark by default, light follows for free. Self-contained.
   Glass chrome + restrained accent gradient; underline tabs + hairline section heads +
   node-detail Inspect — the desktop Jexter Lab look, ported to the web front. */

/* ── jexter brand: remap qry-ui + Shoelace primary onto the canonical green ── */
:root,
:root[data-theme="dark"] {   /* cover the dark block too — it has higher specificity than a bare :root */
    --jx-brand:        #4e8f1f;   /* canonical jexter green */
    --jx-brand-bright: #74b73e;   /* lighter green — gradient sheen, hover */
    --jx-brand-deep:   #3f7419;   /* darker green — pressed */
    --qry-blue:        var(--jx-brand);          /* de-facto interactive primary across the shell */
    --qry-cyan:        var(--jx-brand-bright);    /* gradient companion (wordmark, splitter, footer) */
    --qry-accent:      var(--jx-brand);
    --qry-accent-rgb:  78, 143, 31;               /* ambient glow + scrollbars (rgba(var(--…), a)) */
    /* Shoelace primary ramp → jexter green: this is what actually paints <sl-button variant="primary">,
       <sl-switch>, focus rings and checked controls — the qry remap above does NOT reach Shoelace. */
    --sl-color-primary-50:  #f2f8ea;
    --sl-color-primary-100: #e0f0cc;
    --sl-color-primary-200: #c7e3a3;
    --sl-color-primary-300: #a9d275;
    --sl-color-primary-400: #88bd48;
    --sl-color-primary-500: #69a52b;
    --sl-color-primary-600: #4e8f1f;   /* main solid fill */
    --sl-color-primary-700: #3f7419;   /* hover / active */
    --sl-color-primary-800: #335c16;
    --sl-color-primary-900: #2b4a15;
    --sl-color-primary-950: #16280a;
}

html, body { height: 100%; }
body.qry-app { display: flex; flex-direction: column; height: 100vh; overflow: hidden;
    background:
        radial-gradient(1200px 560px at 100% -10%, rgba(var(--qry-accent-rgb), .22), transparent 60%),
        radial-gradient(1000px 560px at -10% 110%, rgba(var(--qry-accent-rgb), .14), transparent 58%),
        var(--qry-bg);
}

/* ── Header — glass, convex lift, gradient wordmark ── */
.jx-head { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto;
    padding: .5rem .7rem;
    background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--qry-blue) 8%, transparent)), var(--qry-glass-strong, var(--qry-glass));
    -webkit-backdrop-filter: var(--qry-blur); backdrop-filter: var(--qry-blur);
    border-bottom: 1px solid color-mix(in srgb, var(--qry-text) 11%, transparent);
    box-shadow: 0 5px 18px -13px rgba(18, 42, 92, .45);
}
.jx-head .sp { flex: 1; }
.jx-brand { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; letter-spacing: -.01em;
    cursor: pointer; padding: .2rem .45rem; border-radius: var(--qry-radius-xs, 6px); }
.jx-brand:hover { background: var(--qry-tint-soft); }
.brandword { font-size: 1.06rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700;
    background: linear-gradient(118deg, var(--qry-blue), var(--qry-cyan));
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.brandsub:empty { display: none; }
.brandsub { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--qry-text-muted); border: 1px solid var(--qry-glass-border); border-radius: 999px; padding: .03rem .4rem; }

/* backend status pill (backend reachability) */
.backend { font-size: .72rem; color: var(--qry-text-muted); display: inline-flex; align-items: center; gap: .35rem; }
.dot { width: .55rem; height: .55rem; border-radius: 999px; background: var(--qry-text-muted); display: inline-block;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--qry-text) 8%, transparent); transition: background .2s; }
.dot.up   { background: #1faa5d; box-shadow: 0 0 0 2px rgba(31, 170, 93, .22); }
.dot.down { background: #d6533a; box-shadow: 0 0 0 2px rgba(214, 83, 58, .22); }

/* ── Body grid: pages · splitter · stage · splitter · inspector (widths drag-resizable) ── */
.jx-body { flex: 1; display: grid; min-height: 0;
    grid-template-columns: var(--jx-left-w, 230px) 6px 1fr 6px var(--jx-right-w, 320px); }
.jx-left, .jx-right { display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    background: var(--qry-glass); -webkit-backdrop-filter: var(--qry-blur); backdrop-filter: var(--qry-blur); }
.jx-left  { border-right: 1px solid var(--qry-glass-border); }
.jx-right { border-left: 1px solid var(--qry-glass-border); }

/* ── Vertical splitters — thin, grow + turn accent on hover/drag ── */
.jx-splitter { position: relative; cursor: col-resize; z-index: 6; background: transparent; touch-action: none; }
.jx-splitter::before { content: ''; position: absolute; inset: 0; margin: 0 auto; width: 1px;
    background: var(--qry-glass-border); transition: background .15s, width .15s; }
.jx-splitter:hover::before, .jx-splitter.dragging::before { width: 3px; background: var(--qry-blue); }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none !important; }

/* ── Tabs — spread full width; collapse to icons-only when too narrow for labels ── */
.jx-tabs { display: flex; align-items: stretch; gap: 0; padding: 0; flex-wrap: nowrap;
    border-bottom: 1px solid color-mix(in srgb, var(--qry-text) 10%, transparent); flex: 0 0 auto; }
.jx-tab { position: relative; flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center;
    gap: .4rem; padding: .5rem .3rem; cursor: pointer; font-size: .76rem; font-weight: 600;
    color: var(--qry-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .15s, border-color .15s; }
.jx-tab + .jx-tab::before { content: ''; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px;
    background: color-mix(in srgb, var(--qry-text) 8%, transparent); }
.jx-tab i, .jx-tab svg { width: .95rem; height: .95rem; flex: 0 0 auto; }
.jx-tab .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jx-tab:hover { color: var(--qry-text); }
.jx-tab.active { color: var(--qry-blue); border-bottom-color: var(--qry-blue); }
.jx-tab.active i, .jx-tab.active svg { color: var(--qry-blue); }
.jx-tabs.icons-only .jx-tab { gap: 0; }
.jx-tabs.icons-only .lbl { display: none; }
/* registered-only tab (AI for guests): greyed but still clickable, so the panel can explain why.
   Override the active state too, so a locked tab reads as disabled even while selected. */
.jx-tab .tab-lock { display: none; width: .68rem; height: .68rem; margin-left: .12rem; }
.jx-tab.locked, .jx-tab.locked.active { color: var(--qry-text-muted); border-bottom-color: transparent; opacity: .5; cursor: help; }
.jx-tab.locked i, .jx-tab.locked svg,
.jx-tab.locked.active i, .jx-tab.locked.active svg { color: var(--qry-text-muted); }
.jx-tab.locked:hover { color: var(--qry-text-muted); }
.jx-tab.locked .tab-lock { display: inline-flex; }
.jx-panel { flex: 1; overflow: auto; padding: .55rem; min-height: 0; display: none; }
.jx-panel.active { display: block; }
/* semi-transparent lock overlay — covers a panel and cuts all interaction beneath (AI for guests) */
.jx-panel[data-rtab="ai"] { position: relative; }
.jx-panel.locked { overflow: hidden; }
.panel-lock { position: absolute; inset: 0; z-index: 6; display: none;
    flex-direction: column; align-items: center; justify-content: center; gap: .65rem;
    padding: 1.4rem; text-align: center;
    background: color-mix(in srgb, var(--qry-bg) 60%, transparent);
    -webkit-backdrop-filter: blur(2.5px) saturate(.8); backdrop-filter: blur(2.5px) saturate(.8); }
.jx-panel.locked .panel-lock { display: flex; }
.panel-lock .pl-icon { width: 1.7rem; height: 1.7rem; color: var(--qry-text-muted); }
.panel-lock .pl-title { font-weight: 600; color: var(--qry-text); }
.panel-lock .pl-sub { font-size: .82rem; line-height: 1.45; color: var(--qry-text-muted); max-width: 24ch; }
.panel-lock sl-button { margin-top: .25rem; }

/* ── Section heading — label + extending hairline (accent icon) ── */
.jx-section { display: flex; align-items: center; gap: .5rem; margin: 1.1rem 0 .45rem;
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--qry-text-muted); white-space: nowrap; }
.jx-section:first-child { margin-top: .35rem; }
.jx-section::after { content: ''; flex: 1; height: 1px; background: var(--qry-line); }
.jx-section i, .jx-section svg { width: .85rem; height: .85rem; flex: 0 0 auto; color: var(--qry-blue); }
.disp-grp { display: flex; flex-direction: column; gap: .15rem; padding-left: .35rem; }
.disp-note { font-size: .68rem; line-height: 1.45; color: var(--qry-text-muted); margin: .5rem 0 .2rem; padding-left: .35rem; }
.jx-panel[data-rtab="display"] sl-radio-group { margin-left: .35rem; }

/* ── Stage — isolated iframe filling the whole central 1fr cell ── */
#stage-frame { width: 100%; height: 100%; border: 0; display: block; background: var(--qry-bg, #dfe3e8); }

/* ── Page list (left) — thumbnails + gradient active ── */
#page-list { display: flex; flex-direction: column; gap: .3rem; }
.pg-item { width: 100%; text-align: left; padding: .4rem .5rem; cursor: pointer; color: var(--qry-text);
    font-size: .76rem; border: 1px solid transparent; border-radius: var(--qry-radius-sm, 8px);
    transition: var(--qry-transition); }
.pg-item:hover { background: var(--qry-tint-soft); }
.pg-item.active { border-color: var(--qry-glass-border);
    background: linear-gradient(135deg, rgba(var(--qry-accent-rgb), .16), rgba(var(--qry-accent-rgb), .05)); }
.pg-item img { width: 100%; display: block; border: 1px solid var(--qry-line); border-radius: 4px; margin-bottom: .25rem; }
.pg-item .pg-num { display: block; text-align: center; color: var(--qry-text-muted); font-size: .7rem; }

/* ── Outline (left) — bookmarks tree + derived TOC rows ── */
.tree, .tree ul { list-style: none; margin: 0; padding-left: .7rem; }
.tree { padding-left: 0; }
.tree button.tnode { -webkit-appearance: none; appearance: none; background: transparent; border: 0;
    width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--qry-text);
    padding: .14rem .3rem; border-radius: 5px; font-size: .76rem; }
.tree button.tnode:hover { background: var(--qry-tint-soft); }
.out-list { display: flex; flex-direction: column; gap: .04rem; }
.out-row { -webkit-appearance: none; appearance: none; background: transparent; border: 0; width: 100%;
    text-align: left; cursor: pointer; font: inherit; color: var(--qry-text); line-height: 1.3;
    display: flex; align-items: baseline; gap: .45rem; padding: .26rem .45rem;
    border-radius: var(--qry-radius-xs, 6px); transition: var(--qry-transition); }
.out-row:hover { background: var(--qry-tint-soft); }
.out-row .ty { font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; color: var(--qry-text-muted); }
.out-row .out-n { font-family: var(--qry-mono, monospace); font-size: .78rem; }
.out-row .out-t { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out-row[data-lvl="1"] .out-t { font-weight: 600; }
.out-row[data-lvl="2"] { padding-left: 1.1rem; }
.out-row[data-lvl="3"] { padding-left: 1.9rem; }
.out-row[data-lvl="4"] { padding-left: 2.6rem; }
.out-row[data-lvl="3"] .out-t, .out-row[data-lvl="4"] .out-t { color: var(--qry-text-muted); font-size: .76rem; }

/* ── Inspect (right) — node detail card ── */
.nd-type { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--qry-blue); }
.nd-rows { display: grid; grid-template-columns: auto 1fr; gap: .12rem .6rem; font-size: .74rem; margin-top: .45rem; }
.nd-k { color: var(--qry-text-muted); }
.nd-v { font-family: var(--qry-mono, monospace); word-break: break-word; }
.nd-sw { width: .8rem; height: .8rem; border-radius: 3px; display: inline-block;
    box-shadow: 0 0 0 1px var(--qry-line); margin-right: .3rem; vertical-align: -1px; }
.nd-text { margin-top: .55rem; padding: .4rem .5rem; background: var(--qry-tint-soft);
    border-radius: 6px; font-size: .76rem; white-space: pre-wrap; }

/* ── Search (left) ── */
.q-bar { display: flex; gap: .3rem; }
.q-bar sl-input { flex: 1; }
/* loupe: green glyph on no fill (not a solid green pill) */
#q-go::part(base) { background: transparent; border-color: transparent; box-shadow: none; color: var(--jx-brand); }
#q-go::part(base):hover  { background: var(--qry-tint-soft); color: var(--jx-brand-deep); }
#q-go::part(base):active { background: var(--qry-tint-soft); }
.hit { display: flex; gap: .4rem; align-items: baseline; padding: .25rem .35rem; border-radius: 5px;
    cursor: pointer; font-size: .76rem; }
.hit:hover { background: var(--qry-tint-soft); }
.hit .pg { font-family: var(--qry-mono, monospace); color: var(--qry-blue); font-size: .68rem; }

/* ── Fonts (drawer) — glyph grid ── */
.glyph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: .25rem; margin-top: .5rem; }
.glyph { border: 1px solid var(--qry-line); border-radius: 6px; padding: .2rem; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.glyph svg { width: 100%; height: 34px; } .glyph svg path { fill: var(--qry-text); }
.glyph .gid { font-size: .6rem; color: var(--qry-text-muted); font-family: var(--qry-mono, monospace); }
.glyph.active { outline: 2px solid var(--qry-blue); outline-offset: 1px; border-radius: 6px; }

/* ── Footer — matches the header (accent line + lift), tidy controls ── */
.jx-foot { flex: 0 0 auto; position: relative; display: flex; align-items: center; gap: .8rem;
    padding: .34rem .7rem; font-size: .72rem; color: var(--qry-text-muted);
    background: linear-gradient(0deg, color-mix(in srgb, var(--qry-blue) 8%, transparent), transparent 72%), var(--qry-glass-strong, var(--qry-glass));
    -webkit-backdrop-filter: var(--qry-blur); backdrop-filter: var(--qry-blur);
    box-shadow: 0 -5px 18px -13px rgba(18, 42, 92, .45); }
.jx-foot::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, var(--qry-blue), var(--qry-cyan)); opacity: .75; }
.jx-foot .sp { flex: 1; }
.jx-foot .mono { font-family: var(--qry-mono, monospace); font-size: .7rem; color: var(--qry-text-muted); }
.jx-foot #status { font-weight: 600; color: var(--qry-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.jx-foot #status i, .jx-foot #status svg { color: var(--qry-blue); width: .9rem; height: .9rem; vertical-align: -2px; display: inline-block; }
#unit::part(expand-icon) { display: none; }
#unit::part(combobox) { padding-inline: .55rem; justify-content: center; }
#unit::part(display-input) { text-align: center; }
#brand-menu::part(panel) { overflow-x: hidden; }
#brand-menu sl-menu { max-width: 22rem; }
.pagebox { display: inline-flex; align-items: baseline; gap: .12rem; color: var(--qry-text-muted); font-size: .72rem; }
.pagebox #pg-cur { color: var(--qry-text); }
.zoom { display: inline-flex; align-items: center; gap: .12rem; padding: .12rem .25rem; border-radius: 999px;
    background: var(--qry-tint-soft); border: 1px solid var(--qry-glass-border); }
.zoom #z-pct { min-width: 3.2ch; text-align: center; color: var(--qry-text); }

/* ── Conversion options drawer ─────────────────────────────────────────────── */
.opt-drawer::part(panel)  { width: min(480px, 94vw); }
.opt-drawer::part(body)   { padding-top: .2rem; }
.opt-drawer::part(footer) { padding-top: .5rem; }

.opt-bar { display: flex; align-items: center; gap: .4rem; padding: .1rem .15rem .75rem; }
.opt-bar #opt-status { font-size: .76rem; color: var(--qry-text-muted); }

#opt-form { display: flex; flex-direction: column; gap: 1.6rem; }
#opt-form.disabled { opacity: .5; }

.opt-section { display: flex; flex-direction: column; gap: .5rem; }
.opt-sec-head { display: flex; align-items: center; gap: .55rem; padding: 0 .15rem; }
.opt-sec-head i, .opt-sec-head svg { width: .85rem; height: .85rem; color: var(--qry-blue); flex: 0 0 auto; }
.opt-sec-head span { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--qry-text-muted); }

.opt-card { border: 1px solid var(--qry-glass-border); border-radius: var(--qry-radius-md, 12px);
    background: color-mix(in srgb, var(--qry-text) 2.5%, transparent); overflow: hidden; }

.opt-row { display: flex; align-items: center; gap: 1rem; min-height: 2.7rem; padding: .15rem .85rem; transition: background .12s; }
.opt-row + .opt-row { border-top: 1px solid color-mix(in srgb, var(--qry-text) 7%, transparent); }
.opt-row:hover { background: color-mix(in srgb, var(--qry-blue) 5%, transparent); }

.opt-main { flex: 1 1 auto; min-width: 0; }
.opt-name { font-size: .82rem; color: var(--qry-text); cursor: help;
    text-decoration: underline dotted color-mix(in srgb, var(--qry-text) 26%, transparent); text-underline-offset: 3px; }

.opt-ctl { flex: 0 0 auto; display: flex; align-items: center; gap: .45rem; }
.opt-ctl .opt-num { width: 4.4rem; }
.opt-ctl .opt-num::part(input) { text-align: right; }
.opt-unit { font-size: .7rem; color: var(--qry-text-muted); white-space: nowrap; min-width: 3.2rem; }

.opt-foot { display: flex; align-items: center; justify-content: space-between; width: 100%; }

/* ── Shared bits ── */
.empty { color: var(--qry-text-muted); font-size: .78rem; padding: 1rem; text-align: center; }
.hidden { display: none !important; }
.mono { font-family: var(--qry-mono, monospace); }
.dim { color: var(--qry-text-muted); }
.qry-btn { transition: var(--qry-transition); }
.menu-n { color: var(--qry-text-muted); font-variant-numeric: tabular-nums; }
.insp-bar { display: flex; align-items: center; gap: .5rem; padding: .2rem .1rem .45rem .5rem;
    border-bottom: 1px solid var(--qry-glass-border); margin-bottom: .4rem; }

/* ── Export dialog ── */
.export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.export-opt { display: flex; gap: .6rem; align-items: center; text-align: left; padding: .7rem .8rem;
    border: 1px solid var(--qry-line); border-radius: 8px; background: transparent; color: var(--qry-text);
    cursor: pointer; transition: var(--qry-transition); }
.export-opt:hover { border-color: var(--qry-blue); background: var(--qry-tint-soft); transform: translateY(-1px); }
.export-opt i, .export-opt svg { width: 1.3rem; height: 1.3rem; color: var(--qry-blue); }
.export-opt .n { font-weight: 600; display: block; }
.export-opt .d { font-size: .72rem; color: var(--qry-text-muted); }
.export-note { font-size: .72rem; color: var(--qry-text-muted); margin-top: .8rem; line-height: 1.45; }

/* ── Auth dialogs ── */
.auth-form { display: flex; flex-direction: column; gap: .75rem; }
.auth-form sl-input { width: 100%; }
.auth-sep { text-align: center; font-size: .72rem; color: var(--qry-text-muted); }
.auth-err { color: var(--sl-color-danger-600); font-size: .8rem; min-height: 1rem; }
.auth-reg { font-size: .8rem; color: var(--qry-text-muted); }
.auth-hint { margin: 0; font-size: .85rem; color: var(--qry-text-muted); }
/* Header guest chip — signals anonymous "guest" mode (sits beside Sign in). */
#auth-out { display: inline-flex; align-items: center; gap: .5rem; }
#auth-out[hidden] { display: none; }   /* the ID rule above outranks [hidden]; restore hiding when signed in */
.guest-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--qry-text-muted);
    padding: .12rem .55rem; border: 1px solid var(--qry-glass-border); border-radius: 999px; white-space: nowrap; }
.guest-chip i, .guest-chip svg { width: 14px; height: 14px; }

/* ── Sign-in dialog — clean & classy ───────────────────────────────────────── */
#login-dialog::part(panel)  { width: 25rem; max-width: 92vw; border-radius: 18px;
    border: 1px solid var(--qry-glass-border); box-shadow: 0 18px 44px -22px rgba(0, 0, 0, .28); }
#login-dialog::part(title)  { font-weight: 600; letter-spacing: .2px; }
#login-dialog::part(body)   { padding-top: .25rem; }
#login-dialog::part(footer) { padding-top: .9rem; gap: .5rem; }
.auth-logo { display: flex; justify-content: center; margin: .4rem 0 .6rem; }
.auth-logo img { height: 64px; width: auto; max-width: 82%; }
.auth-welcome { text-align: center; font-size: .92rem; color: var(--qry-text-muted); letter-spacing: .2px; margin: 0 0 1.45rem; }
/* OAuth hidden for now (paired with jexlab.js `OAUTH_ENABLED = false`). Hiding it here too means a
   cached old jexlab.js can't re-surface it. To re-enable: drop this rule AND flip OAUTH_ENABLED. */
#b-oauth, #oauth-sep { display: none !important; }
.auth-form sl-input::part(form-control-label) { font-size: .76rem; font-weight: 500; color: var(--qry-text-muted); margin-bottom: .25rem; }
.auth-form sl-input::part(base) { border-radius: 10px; transition: box-shadow .15s ease; }
.auth-form sl-input:focus-within::part(base) { box-shadow: 0 0 0 3px rgba(var(--qry-accent-rgb), .2); }
#login-submit::part(base) { border-radius: 10px; font-weight: 600; }
#login-cancel::part(base) { border-radius: 10px; }

/* ── Library drawer ── */
.lib-drawer::part(panel) { width: min(440px, 92vw); }
.lib-head { padding: 0 0 .6rem; border-bottom: 1px solid var(--qry-glass-border); margin-bottom: .6rem; font-size: .76rem; }
.lib-list { display: flex; flex-direction: column; gap: .4rem; }
.lib-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border: 1px solid var(--qry-line);
    border-radius: 10px; background: var(--qry-glass); transition: var(--qry-transition); }
.lib-item:hover { border-color: var(--qry-blue); }
.lib-ic { width: 1.1rem; height: 1.1rem; color: var(--qry-blue); flex: 0 0 auto; }
.lib-main { flex: 1; min-width: 0; cursor: pointer; }
.lib-name { font-weight: 600; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-meta { font-size: .7rem; color: var(--qry-text-muted); font-family: var(--qry-mono, monospace); }
.lib-del { -webkit-appearance: none; appearance: none; background: transparent; border: 0; cursor: pointer;
    color: var(--qry-text-muted); padding: .25rem; border-radius: 6px; flex: 0 0 auto; }
.lib-del:hover { color: #d6533a; background: var(--qry-tint-soft); }
.lib-del svg, .lib-del i { width: 1rem; height: 1rem; }

/* ── Dialogs/drawers — brand font on the title + a restrained green hairline (chrome only) ── */
sl-dialog::part(title),  sl-drawer::part(title)  { font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; }
sl-dialog::part(header), sl-drawer::part(header) { border-bottom: 2px solid color-mix(in srgb, var(--jx-brand) 35%, transparent); }

/* ── Keyboard shortcuts dialog ── */
.kbd-grid { display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem; align-items: center; }
.kbd-grid > div { display: flex; align-items: center; gap: .55rem; }
.kbd-grid kbd { font: 600 .72rem ui-monospace, monospace; background: var(--qry-glass);
    border: 1px solid var(--qry-glass-border); border-radius: 5px; padding: .1rem .4rem; white-space: nowrap; }
.kbd-grid span { color: var(--qry-text-muted); font-size: .82rem; }

/* ── About dialog (hero) ── */
.about-dialog::part(panel) { width: 24rem; max-width: 92vw; }
.about { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: .5rem 0 .2rem; }
.about-logo { height: 3.2rem; width: auto; filter: drop-shadow(0 3px 9px rgba(0, 0, 0, .2)); }
.about-name { font-size: 1.55rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; letter-spacing: -.01em; line-height: 1.1;
    background: linear-gradient(95deg, var(--qry-blue), var(--qry-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.about-tag { color: var(--qry-text-muted); font-size: .85rem; margin-top: -.25rem; }
.about-formats { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin: .2rem 0 .1rem; }
.about-formats span { font: 600 .63rem ui-monospace, monospace; color: var(--qry-text);
    background: var(--qry-glass); border: 1px solid var(--qry-glass-border); border-radius: 999px; padding: .12rem .55rem; letter-spacing: .04em; }
.about-desc { color: var(--qry-text-muted); font-size: .82rem; line-height: 1.55; max-width: 30ch; margin: .15rem 0; }
.about-link { font-size: .82rem; font-weight: 600; color: var(--qry-blue); text-decoration: none; }
.about-link:hover { text-decoration: underline; }

/* ── Fonts: glyph detail (click a cell) ── */
.glyph-detail:empty { display: none; }
.glyph-detail { margin-top: .55rem; }
.gd-card { display: flex; gap: .7rem; align-items: center; padding: .55rem .6rem;
    background: var(--qry-glass); border: 1px solid var(--qry-glass-border); border-radius: 10px; }
.gd-glyph { width: 54px; height: 54px; flex: 0 0 auto; color: var(--qry-text); }
.gd-glyph path { fill: currentColor; }
.gd-rows { display: grid; grid-template-columns: auto auto; gap: .25rem 1.3rem; font-size: .76rem; flex: 1; justify-content: start; align-content: center; }
.gd-rows > div { display: flex; align-items: baseline; gap: .5rem; }
.gd-rows .k { color: var(--qry-text-muted); }
.gd-rows .v { color: var(--qry-text); }
.gd-char { font-size: 1.1rem; font-weight: 600; }
.fonts-drawer::part(panel) { width: min(420px, 92vw); }
.fonts-drawer::part(body) { display: flex; flex-direction: column; min-height: 0; gap: .4rem; }
.fonts-head { flex: 0 0 auto; display: flex; flex-direction: column; gap: .35rem; padding: 0; }
.fonts-head sl-select { width: 100%; }
.fonts-drawer #font-meta { font-size: .7rem; color: var(--qry-text-muted); }
.fonts-drawer .glyph-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; margin-top: 0; }
.fonts-drawer .glyph-detail { flex: 0 0 auto; }

/* ── Reading-order panel ── */
.ro-hint { font-size: .68rem; color: var(--qry-text-muted); }
.ro-list { font-size: .74rem; }
.ro-row { display: flex; align-items: center; gap: .45rem; padding: .2rem .35rem; border-radius: 6px; cursor: pointer; }
.ro-row:hover { background: var(--qry-glass); }
.ro-n { flex: 0 0 auto; min-width: 1.35rem; height: 1.35rem; display: inline-flex; align-items: center; justify-content: center;
    font: 700 .68rem ui-monospace, monospace; color: #fff; background: var(--qry-blue); border-radius: 999px; }
.ro-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--qry-text); }

/* ── Full-window drop target ── */
#drop-veil { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center;
    background: rgba(10, 10, 12, .72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
#drop-veil.show { display: flex; }
#drop-veil .dv-card { border: 2px dashed var(--qry-blue); border-radius: 14px; padding: 2rem 2.6rem; color: #fff;
    font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: .6rem; background: rgba(0, 80, 190, .12); }
#drop-veil .dv-card svg { width: 2.4rem; height: 2.4rem; color: var(--qry-blue); }

/* ── Inspect panel: node tree (top) + selected-node detail (bottom), bidirectionally synced ── */
.jx-panel[data-rtab="inspect"].active { display: flex; flex-direction: column; padding: 0; }
.jx-panel[data-rtab="inspect"] .insp-bar { padding: .45rem .5rem; margin: 0; }
#nodetree { flex: 1 1 auto; overflow: auto; padding: .4rem .3rem; min-height: 0; }
#detail   { flex: 0 0 auto; max-height: 44%; overflow: auto; padding: .55rem;
    border-top: 1px solid color-mix(in srgb, var(--qry-text) 10%, transparent); }
.ntree    { font-size: .735rem; line-height: 1.5; }
.nt-row   { display: flex; align-items: center; gap: .26rem; padding: 1px 4px; border-radius: 5px;
    cursor: pointer; white-space: nowrap; color: var(--qry-text); }
.nt-row:hover   { background: var(--qry-glass); }
.nt-row.active  { background: var(--qry-blue); color: #fff; }
.nt-group > .nt-lbl { color: var(--qry-text-muted); }
.nt-ic    { width: 13px; height: 13px; opacity: .82; flex: 0 0 auto; }
.nt-row.active .nt-ic { opacity: 1; }
.nt-caret { width: 14px; height: 14px; flex: 0 0 auto; display: inline-flex; align-items: center;
    justify-content: center; cursor: pointer; transition: transform .12s; }
.nt-caret svg, .nt-caret i { width: 12px; height: 12px; }
.nt-dot   { width: 12px; flex: 0 0 auto; }
.nt-item.collapsed > .nt-row .nt-caret { transform: rotate(-90deg); }
.nt-item.collapsed > .nt-kids          { display: none; }
.nt-lbl   { overflow: hidden; text-overflow: ellipsis; }
.nt-id    { color: var(--qry-text-muted); font-size: .66rem; margin-left: .35rem; flex: 0 0 auto; }
.nt-row.active .nt-id { color: rgba(255,255,255,.72); }

/* Outline — logical-structure picker (multi-structure: PDF ground truth, heuristic, model…) */
.struct-bar   { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 6px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--qry-text) 8%, transparent); }
.struct-row     { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.struct-row-lbl { flex: 0 0 auto; width: 64px; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--qry-text-muted); }
.struct-none    { font-size: 11px; font-style: italic; color: var(--qry-text-muted); opacity: .85; }
.struct-sep     { flex: 0 0 auto; width: 1px; align-self: stretch; min-height: 16px; margin: 0 2px;
    background: color-mix(in srgb, var(--qry-text) 12%, transparent); }
.struct-pills { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; min-width: 0; }
.struct-pill  { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; line-height: 1.6;
    border: 1px solid var(--qry-glass-border); border-radius: 999px; background: var(--qry-glass);
    color: var(--qry-text-muted); cursor: pointer; }
.struct-pill:hover  { color: var(--qry-text); }
.struct-pill.active { background: var(--qry-blue); border-color: var(--qry-blue); color: #fff; }
.struct-lbl   { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.struct-flag  { font-size: 9px; font-weight: 700; letter-spacing: .04em; padding: 0 4px; border-radius: 3px;
    background: color-mix(in srgb, #d4663a 88%, transparent); color: #fff; }
.struct-pill.active .struct-flag { background: rgba(255,255,255,.28); }
.struct-gen   { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; font-size: 11px; line-height: 1.6;
    border: 1px dashed color-mix(in srgb, var(--qry-accent) 55%, var(--qry-glass-border)); border-radius: 999px;
    background: color-mix(in srgb, var(--qry-accent) 10%, var(--qry-glass)); color: var(--qry-text-muted);
    cursor: pointer; white-space: nowrap; }
.struct-gen:hover:not(:disabled) { color: var(--qry-text); border-color: var(--qry-accent);
    background: color-mix(in srgb, var(--qry-accent) 18%, var(--qry-glass)); }
.struct-gen i, .struct-gen [data-lucide] { width: 13px; height: 13px; }
.struct-gen:disabled, .struct-gen.busy { opacity: .7; cursor: progress; }
.struct-gen sl-spinner { font-size: 11px; --track-width: 2px; }
.struct-edit { border-style: solid; border-color: color-mix(in srgb, var(--qry-blue) 45%, var(--qry-glass-border));
    color: var(--qry-blue); background: color-mix(in srgb, var(--qry-blue) 8%, var(--qry-glass)); }
.struct-edit:hover:not(:disabled) { color: var(--qry-blue); border-color: var(--qry-blue);
    background: color-mix(in srgb, var(--qry-blue) 16%, var(--qry-glass)); }
/* Restructure actions act on the loaded OCD in place (solid border), vs Generate (dashed = adds a structure).
   The `done` state mirrors the OCD's provenance flag: a subtle accent fill + a check tick. */
.struct-restruct { border-style: solid; }
.struct-restruct.done { color: var(--qry-text);
    border-color: color-mix(in srgb, var(--qry-accent) 70%, var(--qry-glass-border));
    background: color-mix(in srgb, var(--qry-accent) 16%, var(--qry-glass)); }
.struct-restruct .restruct-done { width: 12px; height: 12px; color: var(--qry-accent); margin-left: 1px; }

/* ── Collapse the right inspector panel (footer toggle) ── */
.jx-body.right-collapsed { grid-template-columns: var(--jx-left-w, 230px) 6px 1fr 0 0; }
.jx-body.right-collapsed > .jx-splitter[data-split="right"],
.jx-body.right-collapsed > .jx-right { display: none; }

/* ── Slim, accent-tinted scrollbars (panels; the stage iframe styles its own) ── */
.jx-panel::-webkit-scrollbar, #nodetree::-webkit-scrollbar, #detail::-webkit-scrollbar { width: 10px; height: 10px; }
.jx-panel::-webkit-scrollbar-thumb, #nodetree::-webkit-scrollbar-thumb, #detail::-webkit-scrollbar-thumb {
    background: rgba(var(--qry-accent-rgb), .28); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.jx-panel::-webkit-scrollbar-thumb:hover { background: rgba(var(--qry-accent-rgb), .45); background-clip: padding-box; }
.jx-panel::-webkit-scrollbar-track { background: transparent; }

/* ── Log console (F2) — client-only DARK terminal (theme-independent) ── */
.log-console { position: fixed; left: 0; right: 0; bottom: 0; height: 38vh; max-height: 540px;
    display: flex; flex-direction: column; z-index: 50; transform: translateY(101%);
    transition: transform .18s ease;
    background: #0f1722; color: #dbe4ee;
    border-top: 2px solid var(--qry-blue); box-shadow: 0 -14px 44px rgba(8, 38, 84, .34); }
.log-console.open { transform: translateY(0); }
.log-head { display: flex; align-items: center; gap: .5rem; padding: .34rem .6rem;
    background: #0b1119; border-bottom: 1px solid rgba(255, 255, 255, .08); flex: 0 0 auto; }
.log-title { font-weight: 700; font-size: .74rem; display: inline-flex; align-items: center; gap: .4rem; color: #e6edf6; }
.log-title i, .log-title svg { width: .95rem; height: .95rem; color: var(--jx-brand-bright); }
.log-tag { font-size: .58rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #9fb0c3; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 0 .35rem; }
.log-sp { flex: 1; }
.log-filters { display: inline-flex; gap: .15rem; margin-right: .3rem; }
.log-f { font: inherit; font-size: .66rem; padding: .12rem .5rem; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .15); background: transparent; color: #9fb0c3; transition: var(--qry-transition); }
.log-f:hover { color: #e6edf6; border-color: rgba(255, 255, 255, .28); }
.log-f.active { background: var(--qry-blue); color: #fff; border-color: transparent; }
.log-console .qry-btn { color: #9fb0c3; }
.log-console .qry-btn:hover { color: #e6edf6; }
.log-body { flex: 1; overflow: auto; padding: .35rem .55rem; font-family: var(--qry-mono, monospace);
    font-size: .72rem; line-height: 1.5; color: #dbe4ee; }
.log-row { display: grid; grid-template-columns: 3.1rem 7.5rem 1fr; gap: .55rem; padding: .04rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06); white-space: pre-wrap; word-break: break-word; }
.log-lv { text-transform: uppercase; font-size: .58rem; font-weight: 700; align-self: center; letter-spacing: .03em; }
.log-src { color: #8a99ab; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-msg { color: #dbe4ee; }
.lv-error .log-lv, .lv-error .log-msg { color: #ff6b6e; }
.lv-warn  .log-lv { color: #ffc14d; }
.lv-info  .log-lv { color: #5aa2ff; }
.lv-debug .log-lv, .lv-debug .log-msg { color: #8a99ab; }
.src-js   .log-src { color: #2bd4e6; }
.src-server .log-src { color: #c792ea; }
.log-console[data-filter="debug"] .log-row:not(.lv-debug),
.log-console[data-filter="info"]  .log-row:not(.lv-info),
.log-console[data-filter="warn"]  .log-row:not(.lv-warn),
.log-console[data-filter="error"] .log-row:not(.lv-error) { display: none; }

/* ════════════════════════════════════════════════════════════════════════════
   AI structure panel + structure editor (manual restructuring)
   ════════════════════════════════════════════════════════════════════════════ */

/* structure-provenance flag colours — shared by the Outline pills (.struct-flag)
   and the AI panel rows (.ai-flag). PDF keeps the existing orange. */
.ai-flag { font-size: 9px; font-weight: 700; letter-spacing: .04em; padding: 0 4px; border-radius: 3px;
    color: #fff; background: var(--qry-text-muted); flex: 0 0 auto; }
.ai-flag.flag-pdf,       .struct-flag             { background: color-mix(in srgb, #d4663a 88%, transparent); }
.ai-flag.flag-model,     .struct-flag.flag-model  { background: color-mix(in srgb, #8b5cf6 90%, transparent); }
.ai-flag.flag-manual,    .struct-flag.flag-manual { background: color-mix(in srgb, #10b981 88%, transparent); }
.ai-flag.flag-heuristic                            { background: color-mix(in srgb, #3b82f6 86%, transparent); }
.ai-flag.flag-other,     .ai-flag.flag-undefined   { background: var(--qry-text-muted); }
.struct-pill.active .struct-flag.flag-model,
.struct-pill.active .struct-flag.flag-manual       { background: rgba(255,255,255,.28); }

/* AI panel */
.ai-note { font-size: .68rem; line-height: 1.5; color: var(--qry-text-muted); margin: .4rem 0 .2rem; padding-left: .15rem; }
.ai-note b { color: var(--qry-text); font-weight: 600; }
.ai-actions { display: flex; gap: .4rem; margin: .55rem 0 .2rem; }
.ai-fewshot { margin-top: .2rem; }
.ai-status { font-size: .68rem; line-height: 1.5; min-height: 1.1rem; margin: .5rem 0 .2rem; padding-left: .15rem;
    display: flex; align-items: center; gap: .35rem; color: var(--qry-text-muted); }
.ai-status .ok  { color: #10b981; }
.ai-status .err { color: var(--qry-red, #ef4444); }
.ai-status .dim { color: var(--qry-text-muted); }
.ai-structures { display: flex; flex-direction: column; gap: 3px; }
.ai-struct { display: grid; grid-template-columns: auto 1fr; grid-auto-rows: auto; column-gap: .4rem; row-gap: 1px;
    align-items: center; text-align: left; width: 100%; padding: .3rem .45rem; cursor: pointer;
    background: var(--qry-glass); border: 1px solid var(--qry-glass-border); border-radius: 7px; color: var(--qry-text); }
.ai-struct:hover  { border-color: color-mix(in srgb, var(--qry-blue) 50%, var(--qry-glass-border)); }
.ai-struct.active { border-color: var(--qry-blue); background: color-mix(in srgb, var(--qry-blue) 14%, var(--qry-glass)); }
.ai-sname { font-size: .72rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-sprov { grid-column: 2; font-size: .62rem; color: var(--qry-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* structure-editor toolbar */
.se-bar { display: flex; align-items: center; gap: 5px; padding: 5px 8px; flex-wrap: wrap;
    border-bottom: 1px solid var(--qry-line); }
.se-btn { display: inline-flex; align-items: center; gap: .3rem; font: inherit; font-size: 11px; line-height: 1.5;
    padding: 2px 8px; cursor: pointer; color: var(--qry-text); background: var(--qry-glass);
    border: 1px solid var(--qry-glass-border); border-radius: 6px; }
.se-btn:hover:not([disabled]) { border-color: color-mix(in srgb, var(--qry-blue) 55%, var(--qry-glass-border)); }
.se-btn[disabled] { opacity: .4; cursor: not-allowed; }
.se-btn i, .se-btn svg { width: 13px; height: 13px; }
.se-done { color: #fff; background: var(--qry-blue); border-color: var(--qry-blue); }
.se-editing { display: inline-flex; align-items: center; gap: .3rem; font-size: 11px; font-weight: 600; color: var(--qry-text-muted); }
.se-editing i, .se-editing svg { width: 13px; height: 13px; color: #10b981; }
.se-sp { flex: 1 1 auto; }

/* structure-editor tree (reuses .nt-item / .nt-kids indentation) */
.se-tree { font-size: 11px; padding: 4px 2px 8px; }
.se-tree .nt-kids { margin-left: 0; }      /* depth is applied via inline padding on .se-row */
.se-row { display: flex; align-items: center; gap: 3px; padding: 2px 4px; border-radius: 5px; flex-wrap: nowrap; }
.se-row:hover { background: var(--qry-glass); }
.se-role { font: inherit; font-size: 10px; padding: 0 2px; max-width: 8ch; color: var(--qry-text);
    background: var(--qry-bg); border: 1px solid var(--qry-glass-border); border-radius: 4px; flex: 0 0 auto; }
.se-lvl { display: inline-flex; align-items: center; gap: 1px; flex: 0 0 auto; }
.se-lvln { font-size: 9px; font-weight: 700; color: var(--qry-text-muted); min-width: 1.6em; text-align: center; }
.se-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    cursor: pointer; color: var(--qry-text); }
.se-lbl:hover { color: var(--qry-blue); }
.se-act { display: inline-flex; align-items: center; gap: 0; flex: 0 0 auto; }
.se-mini { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
    padding: 0; cursor: pointer; color: var(--qry-text-muted); background: transparent; border: 0; border-radius: 4px; }
.se-mini:hover { background: var(--qry-glass); color: var(--qry-text); }
.se-mini i, .se-mini svg { width: 12px; height: 12px; }
.se-mini.se-del:hover { color: var(--qry-red, #ef4444); background: color-mix(in srgb, #ef4444 14%, transparent); }

/* ── AI model connect form (desktop · caps.ai · JS-injected by jexlab.js) ────────────────────
   The web hides this (caps.ai === false); on desktop it sits at the top of the AI panel. */
.ai-connect { display: flex; flex-direction: column; gap: .5rem; margin: .2rem 0 .6rem;
    padding: .6rem; border: 1px solid var(--qry-glass-border); border-radius: 8px; background: var(--qry-glass); }
.ai-conn-status { font-size: .7rem; line-height: 1.4; }
.ai-conn-status .ai-ok  { display: inline-flex; align-items: center; gap: .35rem; color: #10b981; font-weight: 600; }
.ai-conn-status .ai-off { display: inline-flex; align-items: center; gap: .35rem; color: var(--qry-text-muted); }
.ai-conn-form { display: flex; flex-direction: column; gap: .4rem; }
.aic-in { width: 100%; box-sizing: border-box; font: inherit; font-size: .74rem; padding: .35rem .5rem;
    color: var(--qry-text); background: var(--qry-bg, transparent); border: 1px solid var(--qry-glass-border); border-radius: 6px; }
.aic-in:focus { outline: none; border-color: var(--qry-blue); }
.aic-in:disabled { opacity: .5; }
.aic-actions { display: flex; gap: .4rem; margin-top: .1rem; }
.aic-btn { font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; padding: .35rem .7rem;
    color: #fff; background: var(--qry-blue); border: 1px solid var(--qry-blue); border-radius: 6px; }
.aic-btn:hover { filter: brightness(1.08); }
.aic-btn.aic-ghost { color: var(--qry-text-muted); background: transparent; border-color: var(--qry-glass-border); }
.aic-btn.aic-ghost:hover { color: var(--qry-text); border-color: var(--qry-text-muted); filter: none; }

/* Analysis-stage scrubber (inspect panel) */
.an-bar { display: flex; align-items: center; gap: .55rem; }
.an-lbl { font-size: .72rem; color: var(--qry-text-soft, #8a8f98); white-space: nowrap; }
.an-stage { font-weight: 600; color: var(--qry-text, inherit); font-variant-numeric: tabular-nums; }
.an-slider { flex: 1 1 auto; min-width: 88px; accent-color: var(--qry-blue); cursor: pointer; }