/* The sheet navigator on the drawing (web/js/nav): "you are here" bar, big previous / next buttons with the neighbour peeking in,
   filmstrip of every sheet, quick switcher, slide between sheets. Tokens only (web/css/tokens.css), light and dark as equals. */
.left{--nav-strip-h:158px}
.ic.flip{transform:scaleX(-1)}

/* ---- "you are here" bar (top of the drawing, where the sheet picker was) */
.nav-bar{position:absolute;left:62px;top:var(--s3);right:72px;z-index:4;display:flex;align-items:center;gap:4px;max-width:max-content;padding:3px;border:1px solid var(--line);border-radius:var(--r-lg,10px);background:var(--surface);box-shadow:var(--e2);font-size:var(--fs-sm);color:var(--ink-2);min-width:0}
.left.has-nav .sheet-pick{display:none}
.nav-step,.nav-tool{flex:none;display:inline-grid;place-items:center;width:32px;height:30px;border:0;border-radius:var(--r);background:transparent;color:var(--ink-2);cursor:pointer}
.nav-step:hover:not(:disabled),.nav-tool:hover{background:var(--surface-3);color:var(--ink)}
.nav-step:disabled{opacity:.35;cursor:default}
.nav-step svg.ic,.nav-tool svg.ic{width:17px;height:17px}
.nav-tool.small{width:26px;height:26px}
.nav-tool[aria-expanded="true"]{background:var(--accent-bg);color:var(--accent)}
.nav-step:focus-visible,.nav-tool:focus-visible,.nav-thumb:focus-visible,.nav-segb:focus-visible,.nav-edge:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.nav-here{display:flex;align-items:baseline;gap:4px 10px;min-width:0;overflow:hidden;white-space:nowrap;padding:0 6px}
.nav-here .nav-doc{color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;min-width:2ch}
.nav-here>span{flex:none}
.nav-here .nav-of{color:var(--ink-3)}
.nav-cls{display:inline-block;padding:0 6px;border-radius:var(--r-pill);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:17px;background:var(--surface-3);color:var(--ink-2)}
.nav-cls.c-scan,.nav-cls.c-photo{background:var(--verify-bg);color:var(--verify-ink)}
.nav-cls.c-vector,.nav-cls.c-cad{background:var(--ok-bg);color:var(--ok-ink)}
#app:not([data-view="drawing"]) .nav-bar,#app:not([data-view="drawing"]) .nav-edge,#app:not([data-view="drawing"]) .nav-strip,#app[data-compare-only="1"] .nav-bar,#app[data-compare-only="1"] .nav-edge,#app[data-compare-only="1"] .nav-strip{display:none}

/* ---- big previous / next at the sides, the neighbour peeking in on hover */
.nav-edge{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:46px;height:46px;margin-top:-23px;border:1px solid var(--line);border-radius:50%;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--ink);box-shadow:var(--e2);cursor:pointer;opacity:.78;transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.nav-edge.prev{left:58px} .nav-edge.next{right:14px}
.nav-edge svg.ic{width:22px;height:22px}
.left:hover .nav-edge,.nav-edge:focus-visible{opacity:1}
.nav-edge:hover{transform:scale(1.06)}
.nav-edge .peek{position:absolute;top:50%;display:flex;flex-direction:column;gap:4px;width:132px;padding:6px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--e3);transform:translateY(-50%) scale(.96);opacity:0;pointer-events:none;transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.nav-edge.prev .peek{left:54px} .nav-edge.next .peek{right:54px}
.nav-edge:hover .peek,.nav-edge:focus-visible .peek{opacity:1;transform:translateY(-50%) scale(1)}
.nav-edge .peek .pn{font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-single .nav-edge{display:none}
@media (pointer:coarse){.nav-edge{opacity:.92}.nav-edge .peek{display:none}}

/* ---- slide between sheets (the plan host moves; nothing with reduced motion) */
@keyframes nav-out-l{to{transform:translateX(-5%);opacity:0}}
@keyframes nav-out-r{to{transform:translateX(5%);opacity:0}}
@keyframes nav-in-r{from{transform:translateX(5%);opacity:0}to{transform:none;opacity:1}}
@keyframes nav-in-l{from{transform:translateX(-5%);opacity:0}to{transform:none;opacity:1}}
#view-drawing.nav-out-l{animation:nav-out-l 140ms var(--ease) forwards}
#view-drawing.nav-out-r{animation:nav-out-r 140ms var(--ease) forwards}
#view-drawing.nav-in-r{animation:nav-in-r 240ms var(--ease)}
#view-drawing.nav-in-l{animation:nav-in-l 240ms var(--ease)}
@media (prefers-reduced-motion:reduce){#view-drawing.nav-out-l,#view-drawing.nav-out-r,#view-drawing.nav-in-r,#view-drawing.nav-in-l{animation:none}.nav-edge,.nav-edge .peek{transition:none}}

/* ---- filmstrip */
.left.nav-strip-open #view-drawing{bottom:var(--nav-strip-h)}
.nav-strip{position:absolute;left:0;right:0;bottom:0;z-index:4;height:var(--nav-strip-h);display:flex;flex-direction:column;border-top:1px solid var(--line);background:var(--surface-2)}
.nav-strip-head{flex:none;display:flex;align-items:center;gap:10px;padding:4px 10px 0 12px;font-size:var(--fs-xs);color:var(--ink-3)}
.nav-strip-head .ttl{font-weight:700;color:var(--ink-2);letter-spacing:.03em}
.nav-strip-head .nav-tool{margin-left:auto}
.nav-seg{display:inline-flex;align-items:center;gap:2px}
.nav-seg .lbl{margin-right:4px}
.nav-segb{height:22px;padding:0 9px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);font:inherit;font-weight:600;cursor:pointer}
.nav-segb.on{background:var(--accent-bg);border-color:var(--accent-line);color:var(--accent)}
.nav-strip-body{flex:1 1 auto;min-height:0;display:flex;align-items:stretch;gap:14px;overflow-x:auto;overflow-y:hidden;padding:6px 12px 8px;scroll-behavior:smooth;overscroll-behavior:contain}
.nav-group{flex:none;display:flex;flex-direction:column;gap:4px;min-width:0}
.nav-glabel{font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);white-space:nowrap;padding-left:2px}
.nav-grow{display:flex;gap:8px;flex:1 1 auto;min-height:0}
.nav-thumb{position:relative;flex:none;display:flex;flex-direction:column;gap:3px;width:128px;padding:4px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink-2);cursor:pointer;text-align:left;font:inherit}
.nav-thumb:hover{border-color:var(--accent-line)}
.nav-thumb.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg),0 0 0 1px var(--accent)}
.nav-cap{display:flex;flex-direction:column;line-height:1.2;font-size:11px;min-width:0}
.nav-cap b{color:var(--ink);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-cap span{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-badges{position:absolute;left:8px;top:8px;right:8px;display:flex;gap:3px;flex-wrap:wrap;pointer-events:none}
.nav-badges .nb{display:inline-flex;align-items:center;gap:2px;padding:0 5px;border-radius:var(--r-pill);font-size:10.5px;font-weight:700;line-height:17px;background:var(--c-bg);color:var(--c-ink);border:1px solid var(--c-line,transparent)}
.nav-badges .nb svg.ic{width:11px;height:11px;color:var(--c)}

/* ---- thumbnails: placeholder first, the image when it arrives, the value boxes on top */
.nav-img{position:relative;display:block;width:100%;max-height:78px;overflow:hidden;border-radius:4px;background:var(--paper,#fff);border:1px solid var(--line-2)}
.nav-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity var(--t) var(--ease)}
.nav-img.loaded img{opacity:1}
.nav-img .ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1px;color:var(--ink-3);background:repeating-linear-gradient(135deg,transparent 0 9px,var(--line-2) 9px 10px)}
.nav-img .ph b{font-size:12px;color:var(--ink-2)} .nav-img .ph i{font-size:10px;font-style:normal}
.nav-img.loaded .ph{display:none}
.nav-boxes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.nav-boxes rect{fill:var(--ok);fill-opacity:.45;stroke:none}
.nav-boxes rect.st-verify{fill:var(--verify)} .nav-boxes rect.st-alarm{fill:var(--alarm);fill-opacity:.7} .nav-boxes rect.st-conflict{fill:var(--conflict)} .nav-boxes rect.st-not_found{fill:var(--nf)} .nav-boxes rect.st-assumed{fill:var(--assumed)}
.nav-img.peek{max-height:none}
.nav-img.mini{width:64px;max-height:46px;flex:none}
@media (prefers-reduced-motion:reduce){.nav-img img{transition:none}.nav-strip-body{scroll-behavior:auto}}

/* ---- quick switcher */
.nav-goto{align-items:start;padding-top:12vh}
.nav-goto .modal-card{width:min(560px,94vw);padding:10px 12px}
.nav-ghead{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--line-2)}
.nav-ghead svg.ic{width:18px;height:18px;color:var(--ink-3)}
.nav-gin{flex:1 1 auto;min-width:0;height:34px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-md);outline:0}
.nav-glist{list-style:none;margin:6px 0 0;padding:0;max-height:52vh;overflow:auto}
.nav-glist li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r);cursor:pointer}
.nav-glist li.on{background:var(--accent-bg)}
.nav-glist li.cur .gt b::after{content:" ●";color:var(--accent);font-size:10px}
.nav-glist li.none{color:var(--ink-3);cursor:default}
.nav-glist .gt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.nav-glist .gt b{color:var(--ink)}
.nav-glist .gt .muted{font-size:var(--fs-xs)}
.nav-glist .gt .why{font-size:var(--fs-xs);color:var(--accent)}
.nav-ghint{margin:8px 2px 0}

/* ---- split view (web/js/nav/split.js): the drawing on one side, a second sheet on the other, a divider in between */
.left{--split:50%}
.left.nav-split-v #view-drawing{right:calc(100% - var(--split))}
.left.nav-split-h #view-drawing{bottom:calc(100% - var(--split))}
.nav-pane2{position:absolute;z-index:2;display:flex;flex-direction:column;background:var(--page-bg);border-left:0}
.left.nav-split-v .nav-pane2{top:0;bottom:0;right:0;left:calc(var(--split) + 6px)}
.left.nav-split-h .nav-pane2{left:0;right:0;bottom:0;top:calc(var(--split) + 6px)}
.left.nav-split .nav-strip{display:none}
.left.nav-split-v.nav-strip-open #view-drawing{bottom:0}
.nav-split-div{position:absolute;z-index:3;background:var(--line);touch-action:none}
.nav-split-div::after{content:"";position:absolute;inset:0;margin:auto;border-radius:2px;background:var(--ink-3);opacity:.55}
.left.nav-split-v .nav-split-div{top:0;bottom:0;left:var(--split);width:6px;cursor:col-resize}
.left.nav-split-v .nav-split-div::after{width:2px;height:36px}
.left.nav-split-h .nav-split-div{left:0;right:0;top:var(--split);height:6px;cursor:row-resize}
.left.nav-split-h .nav-split-div::after{height:2px;width:36px}
.nav-p2plan .plan-tools .tool:nth-child(n+5){display:none}
.nav-split-div:hover,.nav-split-div.drag{background:var(--accent-line)}
.nav-split-div:focus-visible{outline:2px solid var(--focus);outline-offset:0}
.nav-p2head{flex:none;display:flex;align-items:center;gap:2px;min-width:0;padding:4px 6px;border-bottom:1px solid var(--line);background:var(--surface)}
.nav-p2head .spacer{flex:1 1 auto}
.nav-p2head .nav-tool.on{background:var(--accent-bg);color:var(--accent)}
.nav-p2sel{min-width:0;max-width:240px;flex:0 1 auto;height:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-sm)}
.nav-p2plan{position:relative;flex:1 1 auto;min-height:0}
#nav-split-btn[aria-pressed="true"]{background:var(--accent-bg);color:var(--accent)}
/* in the split view the side buttons and the bar belong to the first side */
.left.nav-split-v .nav-edge.next{right:calc(100% - var(--split) + 12px)}
.left.nav-split-v .nav-bar{right:calc(100% - var(--split) + 8px)}
.left.nav-split-h .nav-edge{top:calc(var(--split) / 2)}
#app:not([data-view="drawing"]) .nav-pane2,#app:not([data-view="drawing"]) .nav-split-div{display:none}
@media print{.nav-pane2,.nav-split-div{display:none!important}.left.nav-split-v #view-drawing,.left.nav-split-h #view-drawing{right:0;bottom:0}}

/* ---- narrow screens: the bar keeps the essentials, the strip gets shorter */
@media (max-width:760px){
  .left{--nav-strip-h:124px}
  .nav-bar{left:52px;right:8px;max-width:none}
  .nav-here .nav-st,.nav-here .nav-sc,.nav-here .nav-cls{display:none}
  .nav-edge.prev{left:8px}
  .nav-thumb{width:100px}
  .nav-img{max-height:56px}
}
@media print{.nav-bar,.nav-edge,.nav-strip{display:none!important}.left.nav-strip-open #view-drawing{bottom:0}}