/* THE LIGHTBOX: PRO TOOLS, MORE TOOLS, SEARCH AND THE MORE MENU (5 Nov 2026; js/designs/x-lb-tools.js; docs/DESIGNER-LIGHTBOX-PLAN-2026-11-05.md).
   Linked after css/designer-lightbox.css. Every rule is scoped to html.dzlb (the Lightbox) and uses its tokens (--lb-ink, --lb-sel, --lb-sel-line,
   --lb-lime, --lb-line, --lb-focus...). The bright look: quiet Title Case headings (13 px semibold), lime only for chosen things, primary for the
   switches and the focus ring, ink line icons, white fields with a 1 px edge, every corner a token (never a pill), nothing under 12 px. */

/* ---------------- More Tools (the pane "lbtools" in the left panel) ---------------- */
html.dzlb [data-dzpane="lbtools"]{padding-top:2px}
html.dzlb .lbt-top{display:grid;gap:6px;margin:0 0 12px}
html.dzlb [data-dzpane="lbtools"] .lb-tq{position:relative;display:flex;align-items:center;gap:8px;height:40px;margin:0;padding:0 10px;border-radius:var(--radius);background:var(--lb-soft);box-shadow:none;color:var(--lb-ink-3);cursor:text;transition:background .15s,box-shadow .15s}
html.dzlb [data-dzpane="lbtools"] .lb-tq:hover{background:var(--lb-soft-2)}
html.dzlb [data-dzpane="lbtools"] .lb-tq:focus-within{background:#fff;box-shadow:inset 0 0 0 1px var(--logo),0 0 0 3px rgba(140,165,39,.22)}
html.dzlb [data-dzpane="lbtools"] .lb-tq svg{flex:none;width:16px;height:16px;color:var(--lb-ink-2)}
html.dzlb [data-dzpane="lbtools"] .lb-tq input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;box-shadow:none!important;font:inherit;font-size:13px;color:var(--lb-ink)}
html.dzlb [data-dzpane="lbtools"] .lb-tq input::placeholder{color:var(--lb-ink-3)}
html.dzlb .lbt-pal-btn{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 6px;margin-left:-6px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--lb-ink-2);font:inherit;font-size:12px;font-weight:500;cursor:pointer}
html.dzlb .lbt-pal-btn:hover{background:var(--lb-raised);color:var(--lb-ink)}
html.dzlb .lbt-pal-btn svg{width:14px;height:14px}
/* key hints */
html.dzlb .lbt-pal-btn kbd,html.dzlb [data-dzpane="lbtools"] .lb-trow kbd,html.dzlb .lbt-menu kbd{flex:none;margin-left:auto;padding:1px 5px;border-radius:var(--radius-sm);background:var(--lb-raised-2);font:inherit;font-size:12px;font-weight:500;line-height:18px;color:var(--lb-ink-2)}
html.dzlb .lbt-pal-btn kbd{margin-left:4px}

/* Simple Tools | All Tools */
html.dzlb .lbt-mode{margin:0 0 6px;padding:0}
html.dzlb .lbt-mode[hidden]{display:none}
html.dzlb .lbt-seg{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:2px;border-radius:var(--radius);background:var(--lb-soft);box-shadow:none}
html.dzlb .lbt-seg button{min-height:32px;padding:0 8px;border:0;border-radius:var(--radius);background:transparent;color:var(--lb-ink-2);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
html.dzlb .lbt-seg button:hover{color:var(--lb-ink)}
html.dzlb .lbt-seg button[aria-checked="true"]{background:#fff;box-shadow:0 1px 2px rgba(42,42,51,.10),0 0 0 .5px rgba(42,42,51,.08);color:var(--lb-ink)}
html.dzlb .lbt-seg button:focus-visible{box-shadow:var(--lb-focus)}
html.dzlb .lbt-seg button[aria-checked="true"]:focus-visible{box-shadow:0 1px 2px rgba(42,42,51,.10),var(--lb-focus)}
html.dzlb .lbt-mode-s{margin:8px 2px 0;font-size:var(--lb-help-size);line-height:1.45;color:var(--lb-help)}

/* the groups */
html.dzlb .lbt-body{display:block}
html.dzlb .lbt-grp{margin:0;padding:12px 0 2px}
html.dzlb .lbt-grp+.lbt-grp{border-top:1px solid var(--lb-line)}
html.dzlb .lbt-grp[hidden]{display:none}
html.dzlb .lbt-gh{margin:4px 0 6px 2px;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--lb-ink)}
html.dzlb .lbt-list{display:grid;gap:2px}
html.dzlb [data-dzpane="lbtools"] .lb-trow{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;margin:0;padding:6px 8px 6px 6px;border:0;border-radius:var(--radius);background:transparent;color:var(--lb-ink);font:inherit;text-align:left;cursor:pointer;transition:background-color .12s}
html.dzlb [data-dzpane="lbtools"] .lb-trow[hidden]{display:none}
html.dzlb [data-dzpane="lbtools"] .lb-trow:hover{background:var(--lb-raised)}
html.dzlb [data-dzpane="lbtools"] .lb-trow:active{background:var(--lb-raised-2)}
html.dzlb [data-dzpane="lbtools"] .lb-trow:focus-visible{box-shadow:var(--lb-focus)}
html.dzlb [data-dzpane="lbtools"] .lb-trow>svg{flex:none;width:16px;height:16px;color:var(--lb-ink-3)}
html.dzlb [data-dzpane="lbtools"] .lb-tic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius);background:var(--lb-soft);box-shadow:none;color:var(--lb-ink)}
html.dzlb [data-dzpane="lbtools"] .lb-tic svg{width:18px;height:18px;visibility:visible;opacity:1;color:var(--lb-ink)}
html.dzlb [data-dzpane="lbtools"] .lb-tt{flex:1;display:grid;gap:2px;min-width:0}
html.dzlb [data-dzpane="lbtools"] .lb-tt b{font-size:13px;font-weight:500;line-height:1.3;color:var(--lb-ink)}
html.dzlb [data-dzpane="lbtools"] .lb-tt small{font-size:var(--lb-sub-size);line-height:1.35;color:var(--lb-sub)}
/* a switch row: the knob on the right, primary when on */
html.dzlb .lbt-tog .dz-switch{flex:none}
html.dzlb .lbt-tog[aria-checked="true"] .dz-switch{background:var(--lb-primary)}
html.dzlb .lbt-tog[aria-checked="true"] .dz-switch::after{transform:translateX(16px)}
html.dzlb .lbt-tog[aria-checked="true"] .lb-tic{background:var(--lb-sel);box-shadow:none}
html.dzlb .lbt-tog kbd{margin-right:2px}
/* the grid's size, under the Grid row while it is on */
html.dzlb .lbt-gs{display:flex;gap:4px;margin:0 0 6px 54px}
html.dzlb .lbt-gs[hidden]{display:none}
html.dzlb .lbt-gs button{min-height:32px;min-width:56px;padding:0 10px;border:0;border-radius:var(--radius-sm);background:#fff;box-shadow:inset 0 0 0 1px var(--lb-line-firm);color:var(--lb-ink-2);font:inherit;font-size:12px;font-weight:500;cursor:pointer}
html.dzlb .lbt-gs button:hover{background:var(--lb-raised);color:var(--lb-ink)}
html.dzlb .lbt-gs button[aria-checked="true"]{background:var(--lb-sel);box-shadow:inset 0 0 0 1px var(--lb-sel-line);color:var(--lb-ink);font-weight:500}
html.dzlb .lbt-gs button:focus-visible{box-shadow:var(--lb-focus)}
/* nothing found */
html.dzlb [data-dzpane="lbtools"] .lb-tnone{margin:12px 0 0;padding:14px;border-radius:var(--radius);background:var(--lb-raised)}
html.dzlb [data-dzpane="lbtools"] .lb-tnone[hidden]{display:none}
html.dzlb [data-dzpane="lbtools"] .lb-tnone p{margin:0 0 8px;font-size:13px;color:var(--lb-ink-2)}
html.dzlb .lbt-none-btn{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:0;border-radius:var(--radius-sm);background:#fff;box-shadow:inset 0 0 0 1px var(--lb-line-firm);color:var(--lb-ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
html.dzlb .lbt-none-btn:hover{background:var(--lb-raised-2)}

/* Back to More Tools, in the panel's header, for a pane that has no rail item of its own */
html.dzlb .lbt-back{display:inline-flex;align-items:center;gap:4px;min-height:28px;margin:0 0 2px -8px;padding:0 8px 0 4px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--lb-ink-2);font:inherit;font-size:12px;font-weight:500;cursor:pointer}
html.dzlb .lbt-back[hidden]{display:none}
html.dzlb .lbt-back:hover{background:var(--lb-raised);color:var(--lb-ink)}
html.dzlb .lbt-back svg{width:14px;height:14px}
/* the rail's More Tools while one of its tools is open */
html.dzlb .lb-rail .lb-rt.lb-from{background:var(--lb-sel);box-shadow:inset 0 0 0 1px var(--lb-sel-line)}
html.dzlb .lb-rail .lb-rt.lb-from:focus-visible{box-shadow:inset 0 0 0 1px var(--lb-sel-line),var(--lb-focus)}
/* the section a More Tools row opened, for a moment */
@keyframes lbtFlash{0%{background-color:var(--lb-sel-2)}100%{background-color:transparent}}
html.dzlb .lbt-flash{animation:lbtFlash 1.5s ease-out;border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){html.dzlb .lbt-flash{animation:none;box-shadow:inset 0 0 0 1px var(--lb-sel-line)}}

/* ---------------- Search Tools (the command window, on body) ---------------- */
html.dzlb .lb-pal-scrim{position:fixed;inset:0;z-index:160;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;background:rgba(32,42,52,.18);opacity:0;transition:opacity .14s ease-out}
html.dzlb .lb-pal-scrim.on{opacity:1}
html.dzlb .lb-pal{width:min(580px,100%);max-height:min(560px,76vh);display:flex;flex-direction:column;border-radius:var(--radius);background:#fff;box-shadow:0 18px 48px rgba(27,39,51,.16),0 2px 8px rgba(27,39,51,.08),0 0 0 1px rgba(27,39,51,.08);overflow:hidden;font-family:Montserrat,system-ui,sans-serif;color:var(--lb-ink)}
html.dzlb .lb-pal-q{flex:none;display:flex;align-items:center;gap:10px;height:54px;padding:0 16px;border-bottom:1px solid var(--lb-line)}
html.dzlb .lb-pal-q svg{flex:none;color:var(--lb-ink-2)}
html.dzlb .lb-pal-q input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;font:inherit;font-size:15px;font-weight:500;color:var(--lb-ink);outline:0;box-shadow:none}
html.dzlb .lb-pal-q input::placeholder{color:var(--lb-ink-3)}
html.dzlb .lb-pal kbd{flex:none;padding:2px 6px;border-radius:var(--radius-sm);background:var(--lb-raised-2);font:inherit;font-size:12px;font-weight:500;line-height:16px;color:var(--lb-ink-2)}
html.dzlb .lb-pal-list{flex:1;min-height:0;overflow:auto;padding:6px;overscroll-behavior:contain}
html.dzlb .lb-pal-g{padding:10px 10px 4px;font-size:12px;font-weight:500;color:var(--lb-ink-2)}
html.dzlb .lb-pal-row{display:flex;align-items:center;gap:12px;min-height:40px;padding:4px 10px;border-radius:var(--radius-sm);cursor:pointer;font-size:13px;color:var(--lb-ink)}
html.dzlb .lb-pal-row[aria-selected="true"]{background:var(--lb-sel);box-shadow:inset 0 0 0 1px var(--lb-sel-line)}
html.dzlb .lb-pal-ic{flex:none;display:flex;color:var(--lb-ink)}
html.dzlb .lb-pal-ic svg{width:18px;height:18px;visibility:visible;opacity:1}
html.dzlb .lb-pal-l{flex:1;min-width:0;display:grid;gap:1px;font-weight:500;line-height:1.3}
html.dzlb .lb-pal-l small{font-size:var(--lb-sub-size);font-weight:400;color:var(--lb-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.dzlb .lb-pal-row[aria-selected="true"] .lb-pal-l small{color:var(--lb-ink-2)}
html.dzlb .lb-pal-row.is-off{color:var(--lb-ink-3)}
html.dzlb .lb-pal-row.is-off .lb-pal-ic{color:var(--lb-ink-off)}
html.dzlb .lb-pal-off{flex:none;font-size:var(--lb-sub-size);color:var(--lb-sub)}
html.dzlb .lb-pal-on{flex:none;font-size:var(--lb-sub-size);font-weight:500;color:var(--lb-sub)}
html.dzlb .lb-pal-on.yes{color:var(--lb-primary)}
html.dzlb .lb-pal-row[aria-selected="true"] .lb-pal-off,html.dzlb .lb-pal-row[aria-selected="true"] .lb-pal-on:not(.yes){color:var(--lb-ink-2)}
html.dzlb .lb-pal-row[aria-selected="true"] kbd{background:#fff}
html.dzlb .lb-pal-f{flex:none;display:flex;gap:18px;align-items:center;height:38px;padding:0 16px;border-top:1px solid var(--lb-line);background:var(--lb-raised);font-size:12px;color:var(--lb-ink-2)}
html.dzlb .lb-pal-f span:last-child{margin-left:auto}
html.dzlb .lb-pal-f kbd{margin-right:3px;padding:1px 4px;background:#fff;box-shadow:inset 0 0 0 1px var(--lb-line)}
html.dzlb .lb-pal-empty{margin:18px 12px;font-size:13px;line-height:1.5;color:var(--lb-ink-2)}
@media (pointer:coarse){html.dzlb .lb-pal-row{min-height:46px} html.dzlb .lb-pal-f{display:none}}
@media (max-width:860px){
  html.dzlb .lb-pal-scrim{padding:8px 8px 0}
  html.dzlb .lb-pal{max-height:calc(100dvh - 16px)}
  html.dzlb .lb-pal-f{display:none}
  html.dzlb .lb-pal-row{min-height:46px}
  html.dzlb .lb-pal-q{height:52px}
  html.dzlb .lb-pal-q kbd{display:none}
}

/* ---------------- the More menu and Help in the bright look (on body) ---------------- */
html.dzlb .dz-menu.lbt-menu{min-width:248px;padding:6px;border-radius:var(--radius);box-shadow:0 0 0 1px rgba(42,42,51,.06),0 4px 10px rgba(42,42,51,.06),0 24px 48px -16px rgba(42,42,51,.28);color:var(--lb-ink)}
html.dzlb .dz-menu.lbt-menu .dz-menu-gh,html.dzlb .dz-menu.lbt-menu .dz-menu-h{margin:8px 10px 4px;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--lb-ink-2)}
html.dzlb .dz-menu.lbt-menu .dz-menu-gh:first-child,html.dzlb .dz-menu.lbt-menu .dz-menu-h:first-child{margin-top:4px}
html.dzlb .dz-menu.lbt-menu .dz-menu-sep{height:1px;margin:6px 8px;background:var(--lb-line)}
html.dzlb .dz-menu.lbt-menu>button{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:0 10px;border:0;border-radius:var(--radius);background:transparent;color:var(--lb-ink);font:inherit;font-size:13px;font-weight:500;text-align:left;cursor:pointer}
html.dzlb .dz-menu.lbt-menu>button:hover{background:var(--lb-soft)}
html.dzlb .dz-menu.lbt-menu>button:focus-visible{background:var(--lb-raised-2);box-shadow:inset 0 0 0 1.5px var(--lb-primary);outline:0}
html.dzlb .dz-menu.lbt-menu>button svg{flex:none;width:17px;height:17px;visibility:visible;opacity:1;color:var(--lb-icon);stroke-width:var(--lb-icon-w)}
html.dzlb .dz-menu.lbt-menu>button span{flex:1;min-width:0}
@media (pointer:coarse){html.dzlb .dz-menu.lbt-menu>button{min-height:44px}}
@media (max-width:860px){html.dzlb .dz-menu.lbt-menu>button{min-height:44px}}

/* touch screens with room (tablets): 44 px targets in More Tools */
@media (pointer:coarse){
  html.dzlb [data-dzpane="lbtools"] .lb-trow{min-height:52px}
  html.dzlb .lbt-seg button,html.dzlb .lbt-gs button,html.dzlb .lbt-back,html.dzlb .lbt-none-btn{min-height:44px}
  html.dzlb [data-dzpane="lbtools"] .lb-tq{height:44px}
}
@media (max-width:860px){
  html.dzlb [data-dzpane="lbtools"] .lb-trow{min-height:52px}
  html.dzlb .lbt-seg button,html.dzlb .lbt-gs button,html.dzlb .lbt-back,html.dzlb .lbt-none-btn{min-height:44px}
  html.dzlb [data-dzpane="lbtools"] .lb-tq{height:44px}
}