/* The view of a page and its answer (gallery/view.js): used by /gallery/ and /try/.
   Left the explanation, right the page picture, large; the tabs Parameters, Text, Formatted, JSON next to it or below it. Tokens of site.css. */
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main.wide{max-width:1560px}  /* only the working area is wider; header row and footer keep the width of every other page */
main.wide#app>h1,main.wide#app>p{max-width:1072px;margin-left:auto;margin-right:auto}  /* heading and intro stand under the logo, as on every page; the tool below steps out on both sides */
.ov{display:grid;gap:20px;grid-template-columns:minmax(0,1fr);align-items:start;margin:16px 0 32px}
.ov>*{min-width:0}
.ov-side{display:grid;gap:14px;align-content:start}
.ov-main{display:grid;gap:20px;grid-template-columns:minmax(0,1fr);align-items:start;order:-1}
.ov-main>*{min-width:0}
.ov-notice{border:2px dashed var(--flag);border-radius:10px;padding:10px 14px;margin:0;font-size:var(--fs-sm);line-height:1.5}
.ov-ctl{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ov-play{font:600 var(--fs-sm) var(--sans);color:var(--on-acc);background:var(--acc);border:1px solid var(--acc);border-radius:8px;padding:6px 16px;min-height:38px;cursor:pointer}
.ov-nav{display:none;font:600 var(--fs-lead) var(--sans);line-height:1;color:var(--fg);background:var(--bg-subtle);border:1px solid var(--border);border-radius:8px;min-width:44px;min-height:44px;cursor:pointer}
.ov-nav:disabled{opacity:.35;cursor:default}
.ov-count{white-space:nowrap;color:var(--mut)}
.ov-steps{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.ov-steps li{position:relative;padding:8px 12px;border-left:4px solid var(--border);font-size:var(--fs-sm);line-height:1.5;color:var(--mut)}
.ov-steps li.cur{border-left-color:var(--acc);color:var(--fg);background:var(--bg-subtle)}
.ov-steps li b{color:var(--fg)}
.ov-n{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:8px;border-radius:50%;border:1.5px solid var(--mut);font-size:var(--fs-xs);font-weight:600;line-height:1;vertical-align:1px}
.ov-sn{display:none}
.ov-zoom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}
.ov-tile{margin:0;border:1px solid var(--border);border-radius:8px;padding:6px;display:grid;gap:4px;align-content:start;min-width:0}
.ov-tile canvas{display:block;width:100%;height:auto;background:var(--bg-subtle);border-radius:4px}
.ov-tile figcaption{margin:0;font-size:var(--fs-xs);line-height:1.35;overflow-wrap:anywhere}
.ov-fig{display:grid;gap:6px}
.ov-page{position:relative;border:1px solid var(--border);background:var(--bg-subtle);width:100%;aspect-ratio:3/4}
.ov-page .ov-img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill}
.ov-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ov-svg .ow .bx{fill:color-mix(in srgb,var(--acc) 10%,transparent);stroke:var(--acc);stroke-width:2;vector-effect:non-scaling-stroke;opacity:0}
.ov-svg .ow .cv{fill:var(--paper);opacity:0;pointer-events:none}
.ov-svg .ow text{fill:var(--ink);opacity:0;pointer-events:none;font-family:var(--sans)}
.ov-svg .ow{cursor:pointer;outline:none}
.ov-svg .ow .bx{pointer-events:all}
.ov-svg .ow.on .bx{opacity:1}
.ov-svg .ow.tx .cv,.ov-svg .ow.tx text{opacity:1}
.ov-svg[data-s="conf"] .ow.on .bx{opacity:var(--c);fill:color-mix(in srgb,var(--acc) 18%,transparent)}
.ov-svg[data-s="flags"] .ow.on .bx{opacity:.3}
.ov-svg .hp{stroke:var(--acc)}
/* a flagged entry stays blue like all the others: a hatched fill and a heavier line mark it */
.ov-svg .ow.fl.on .bx,.ov-svg[data-s="flags"] .ow.fl.on .bx{stroke-width:3.5;opacity:1}
.ov-svg[data-s="result"] .ow.on .bx{opacity:.9;stroke-width:2.5}
.ov-svg[data-s="result"] .ow.fl.on .bx{opacity:1;stroke-width:3.5}
.ov-svg .ow.zi .bx{opacity:1;stroke-width:3.5}
.ov-svg .ow.sel .bx{opacity:1;stroke:var(--fg);stroke-width:3;fill:color-mix(in srgb,var(--acc) 22%,transparent)}
.ov-svg .ow:focus-visible .bx{opacity:1;stroke:var(--fg);stroke-width:3}
.ov-svg .ow:not(.on){pointer-events:none}
.ov-lbls{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ov-lbl{position:absolute;font:600 var(--fs-xs)/1 var(--sans);padding:3px 6px;background:var(--acc);color:var(--on-acc);border-radius:4px;white-space:nowrap;pointer-events:none}
.ov-tip{font-size:var(--fs-sm);color:var(--mut);display:flex;gap:6px;align-items:center}
.ov-tip input{width:18px;height:18px;accent-color:var(--acc)}
.ov-tabs{display:grid;gap:10px;align-content:start}
.ov-tablist{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--border)}
.ov-tablist button{font:600 var(--fs-sm) var(--sans);color:var(--mut);background:transparent;border:0;border-bottom:3px solid transparent;padding:10px 14px;min-height:44px;cursor:pointer}
.ov-tablist button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--acc)}
.ov-hint{margin:0}
.ov-panel{border:1px solid var(--border);border-radius:8px;padding:10px 14px;background:var(--bg);max-height:34rem;overflow:auto}
.ov-panel p{margin:0}
.ov-thead{color:var(--mut);font-size:var(--fs-sm);margin-bottom:6px!important}
.ov-textfile{font:400 var(--fs-body)/1.5 var(--sans);margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.ov-text .ov-tline{font:400 var(--fs-body)/1.5 var(--sans);margin:0}
.ov-tw{font:inherit;color:inherit;background:none;border:0;padding:0 1px;margin:0;border-radius:3px;cursor:pointer;text-align:left}
.ov-tw:hover{background:var(--bg-subtle)}
.ov-tw.fl{text-decoration:underline dotted var(--acc);text-underline-offset:3px}
.ov-tw.sel,.jw.sel{background:color-mix(in srgb,var(--acc) 20%,transparent);outline:2px solid var(--acc)}
.ov-tw:focus-visible,.jw:focus-visible{outline:3px solid var(--acc)}
.ov-hocr{margin:0 0 8px;font:var(--fs-xs)/1.55 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.ov-dl{margin:0 0 8px!important}
.ov-panel-pdf:not([hidden]){display:flex;flex-direction:column;gap:8px}
.ov-pdfobj{flex:1 1 auto;width:100%;min-height:28rem;border:0}
.ov-pdfobj[hidden]{display:none}
.ov-json{margin:0;font:var(--fs-xs)/1.55 var(--mono);white-space:pre;overflow:visible}
.jw{display:inline;cursor:pointer;border-radius:3px}
.jw:hover{background:var(--bg-subtle)}
.ov-ptab{width:100%;border-collapse:collapse;margin:0 0 8px}
.ov-ptab th{font:600 var(--fs-xs) var(--sans);letter-spacing:.04em;text-transform:none;color:var(--mut);padding:10px 16px 10px 0;width:38%;vertical-align:top;border-bottom:1px solid var(--border)}
.ov-ptab td{padding:10px 0;font-size:var(--fs-body);overflow-wrap:anywhere;border-bottom:1px solid var(--border)}
.ov-md h3{font-size:var(--fs-lead);margin:0 0 8px}
.ov-mdp{font-size:var(--fs-body);line-height:1.5;margin:0 0 10px!important}
.ov-mdscroll{overflow:auto;margin:8px 0}
.ov-mdtab{border-collapse:collapse;font-size:var(--fs-sm)}
.ov-mdtab th,.ov-mdtab td{border:1px solid var(--border);padding:4px 8px;text-transform:none;letter-spacing:0;font-weight:400;font-size:var(--fs-sm);color:var(--fg)}
.ov-mdtab th{font-weight:600;background:var(--bg-subtle)}
/* processing: steps without a percentage; the bar only moves, it says nothing about how far */
.ov-work{display:grid;gap:12px}
.ov-wlist{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.ov-wlist li{padding:8px 12px;border-left:4px solid var(--border);font-size:var(--fs-sm);color:var(--mut)}
.ov-wlist li.ov-w-done{border-left-color:var(--acc);color:var(--fg)}
.ov-wlist li.ov-w-doing{border-left-color:var(--acc);color:var(--fg);background:var(--bg-subtle)}
.ov-wlist b{color:var(--fg)}
.ov-bar{height:10px;border-radius:5px;background:var(--bg-subtle);border:1px solid var(--border);overflow:hidden;position:relative}
.ov-bar span{position:absolute;top:0;bottom:0;width:30%;background:var(--acc);border-radius:5px;animation:ov-run 1.6s ease-in-out infinite alternate}
@keyframes ov-run{from{left:0}to{left:70%}}
.ov-inside{margin:0!important}
.ov-wsteps{margin:0;padding-left:1.1em;font-size:var(--fs-sm);line-height:1.5;color:var(--mut)}
.ov-wsteps b{color:var(--fg)}
.ov-isworking .ov-page{opacity:.92}
/* from 1280 px three columns: explanation | page picture as high as the visible area | tabs of the same height, scrolling inside */
@media (min-width:1280px){
.ov:not(.ov-g){grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:28px}
.ov:not(.ov-g) .ov-main{order:0;grid-template-columns:auto minmax(0,1fr);gap:20px;position:sticky;top:12px}
.ov:not(.ov-g) .ov-fig{align-content:start}
.ov:not(.ov-g) .ov-page{width:auto;height:calc(100vh - 64px);min-height:22rem;max-width:58vw}
.ov:not(.ov-g) .ov-tabs{height:calc(100vh - 64px);min-height:22rem;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.ov:not(.ov-g) .ov-tabs>.ov-tablist,.ov-tabs>.ov-hint{flex:none}
.ov:not(.ov-g) .ov-tabs>.ov-panel{flex:1 1 0;max-height:none;min-height:0;overflow:auto}
}
@media (prefers-reduced-motion:reduce){
*{scroll-behavior:auto!important;transition:none!important}
.ov-bar span{animation:none;left:0;width:100%;opacity:.35}
}
.ov-what{margin:10px 0 0}
/* Gallery layout (create(root, {gallery:true}) adds .ov-g): one control bar above the page, the page and the result panel below it,
   a grip between them. The step texts are chips; only the current one is spelled out. Below 1280 px the panel stays under the page, no grip. */
.ov-g{gap:12px;margin-top:8px}
.ov-g .ov-side{order:-2;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:8px 0;background:var(--bg);border-bottom:1px solid var(--border)}
.ov-g .ov-steps{flex:1 1 0;min-width:0;order:2;display:flex;flex-wrap:nowrap;align-items:stretch;gap:4px}
.ov-g .ov-ctl{flex:none;order:1;flex-wrap:nowrap}
.ov-g .ov-steps li{flex:0 1 auto;min-width:0;padding:0 0 7px;border:0;background:none;white-space:nowrap;font-size:var(--fs-xs);line-height:1.4;color:var(--mut)}
.ov-g .ov-steps li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:var(--border)}
.ov-g .ov-steps li.past{color:var(--fg)}
.ov-g .ov-steps li.past::after{background:var(--acc)}
.ov-g .ov-steps li.cur{flex:1 1 20rem;min-width:14rem;padding:6px 14px 10px;white-space:normal;color:var(--fg);background:var(--bg-subtle);border-radius:8px 8px 0 0}
.ov-g .ov-steps li.cur::after{background:linear-gradient(90deg,var(--acc) var(--f,0%),var(--border) 0)}
.ov-jump{display:flex;align-items:center;gap:0;font:inherit;color:inherit;background:none;border:0;padding:4px 8px;margin:0;cursor:pointer;border-radius:6px;text-align:left}
.ov-g .ov-steps li:not(.cur) .ov-jump:hover{background:var(--bg-subtle);color:var(--fg)}
.ov-jump:focus-visible{outline:3px solid var(--acc);outline-offset:1px}
.ov-g .ov-jump b{font-weight:600;color:inherit}
.ov-g .ov-sn{display:inline}
.ov-g .ov-ln{display:none}
.ov-g .ov-steps li.past .ov-n{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.ov-g .ov-steps li:not(.past):not(.cur) .ov-n{border-style:dashed}
.ov-g .ov-steps li.cur .ov-sn{display:none}
.ov-g .ov-steps li.cur .ov-ln{display:inline;font-size:var(--fs-body)}
.ov-g .ov-steps li.cur .ov-n{width:28px;height:28px;font-size:var(--fs-sm);background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.ov-g .ov-steps li.cur .ov-jump{padding:0;cursor:default}
.ov-g .ov-st{display:none}
.ov-g .ov-steps li.cur .ov-st{display:block;margin-top:4px;font-size:var(--fs-sm);line-height:1.45;color:var(--fg)}
.ov-g .ov-notice{flex:1 1 100%;order:0}
.ov-g .ov-warn{flex:1 1 100%;order:0}
.ov-g .ov-work{order:3}
/* small bar (narrow window or 200 % zoom): only the current step, large, with its number; the two arrows and "2 / 7" step through the rest */
@media (max-width:900px){
.ov-g .ov-steps{flex:1 1 100%;order:1}
.ov-g .ov-steps li:not(.cur){display:none}
.ov-g .ov-steps li.cur{flex:1 1 100%;min-width:0}
.ov-g .ov-ctl{flex:1 1 100%;order:2;justify-content:space-between}
.ov-g .ov-ctl .ov-play{margin-right:auto}
.ov-g .ov-nav{display:inline-grid;place-items:center}
}
.ov-g .ov-notice{flex:1 1 100%}
.ov-grip{display:none}
/* from 960 px two columns: the picture uses its column in full (as high as the window allows, never higher), the answer tabs stand beside it
   with exactly the height of the picture and scroll inside. The width of the picture column follows the page ratio, so there is no empty strip. */
@media (min-width:960px){
.ov-g{grid-template-columns:minmax(0,1fr);align-items:stretch;margin-bottom:8px}
.ov-g .ov-main{order:0;position:static;display:grid;grid-template-columns:max(16rem,min(62%,calc((100vh - var(--ov-bar,150px) - 56px)*var(--ov-ar,.75)))) 12px minmax(0,1fr);gap:0;align-items:stretch;grid-auto-rows:minmax(22rem,auto)}
.ov-g .ov-fig{padding:0;align-content:start}
.ov-g .ov-page{width:100%;height:auto}
.ov-g .ov-tabs{display:flex;flex-direction:column;gap:10px;height:0;min-height:100%;overflow:hidden;padding-left:8px;position:static}
.ov-g .ov-tabs>.ov-tablist,.ov-g .ov-tabs>.ov-hint{flex:none}
.ov-g .ov-tabs>.ov-panel{flex:1 1 0;max-height:none;min-height:0;overflow:auto}
.ov-g.ov-set .ov-main{grid-template-columns:minmax(14rem,1fr) 12px minmax(18rem,var(--ov-w))}
.ov-g.ov-set .ov-page{width:min(100%,calc((100vh - var(--ov-bar,150px) - 56px)*var(--ov-ar,.75)))}
.ov-grip{display:block;align-self:stretch;cursor:col-resize;touch-action:none;position:relative;border-radius:6px}
.ov-grip::before{content:"";position:absolute;top:0;bottom:0;left:5px;width:1px;background:var(--border)}
.ov-grip::after{content:"";position:absolute;top:50%;left:2px;width:8px;height:44px;margin-top:-22px;border-radius:4px;background:var(--acc);opacity:0}
.ov-grip:hover::before,.ov-grip.drag::before,.ov-grip:focus-visible::before{background:var(--acc);width:2px}
.ov-grip:hover::after,.ov-grip.drag::after,.ov-grip:focus-visible::after{opacity:1}
.ov-grip:focus-visible{outline:3px solid var(--acc);outline-offset:0}
}
.ov-tips{display:flex;flex-wrap:wrap;gap:4px 18px}
.ov-svg .orr rect{fill:color-mix(in srgb,var(--acc) 7%,transparent);stroke:var(--acc);stroke-width:2;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.ov-svg .otc{fill:none;stroke:var(--acc);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.8;pointer-events:none}
.ov-tabwrap{overflow-x:auto;max-width:100%;margin-bottom:14px}
.ov-gtab{border-collapse:collapse;font-size:var(--fs-sm)}
.ov-gtab th,.ov-gtab td{border:1px solid var(--line,var(--hair));padding:3px 7px;vertical-align:top;text-align:left}
.ov-gtab th{font-weight:600}
.ov-cf{display:block;font-size:var(--fs-xs);color:var(--mut)}
.ov-warn{border-left:4px solid var(--mut);background:var(--bg-subtle);padding:8px 14px;margin:0;font-size:var(--fs-sm);line-height:1.5}
.ov-warn p{margin:0}.ov-warn p+p{margin-top:6px}
.ov-g .ov-warn{flex:1 1 100%}
.ov-miss{margin:0 0 10px;padding:8px 14px;border-left:4px solid var(--mut);background:var(--bg-subtle);font-size:var(--fs-sm);line-height:1.5}
.ov-switch{font:600 var(--fs-xs) var(--sans);margin-left:6px;color:var(--on-acc);background:var(--acc);border:0;border-radius:6px;padding:6px 12px;min-height:36px;cursor:pointer}
.ov-switch:focus-visible{outline:3px solid var(--fg);outline-offset:2px}
@media (max-width:760px){
.ov-zoom{grid-template-columns:minmax(0,1fr)}
}