/* partbrowser.css — the split view every system uses: the machine on one half, the part on the other.
   Inherits whatever tokens the host page defines (--ink, --rule, --acc/--orange, --bg2/--panel). */
.pb{--pb-acc:var(--acc,var(--orange,#0570de));--pb-rule:var(--rule,#e6e6e6);--pb-ink:var(--ink,#30313d);
    --pb-ink2:var(--ink-2,#6d6e78);--pb-ink3:var(--ink-3,#8b8d97);--pb-bg:var(--bg,var(--paper,#fff));
    --pb-bg2:var(--bg2,var(--panel,#f6f9fc));
    display:grid;grid-template-columns:1fr 1fr;height:min(78vh,760px);min-height:460px;
    border-top:1px solid var(--pb-rule);border-bottom:1px solid var(--pb-rule);background:var(--pb-bg);position:relative;overflow:hidden}
.pb-stage{position:relative;min-width:0;min-height:0;background:var(--pb-bg2);overflow:hidden;touch-action:pan-y}
.pb-stage svg.diagram{position:absolute;inset:0;width:100%;height:100%;display:block}
.pb-panel{min-width:0;min-height:0;display:flex;flex-direction:column;border-left:1px solid var(--pb-rule);background:var(--pb-bg);touch-action:pan-y}
.pb-head{flex:none;display:flex;align-items:center;gap:10px;padding:12px 16px 10px;border-bottom:1px solid var(--pb-rule)}
.pb-head .pb-count{font-size:12px;color:var(--pb-ink3);font-variant-numeric:tabular-nums;white-space:nowrap}
.pb-head .pb-spacer{flex:1}
.pb-nav{display:flex;gap:6px}
.pb-nav button,.pb-all{font:inherit;font-size:13px;font-weight:500;background:var(--pb-bg);color:var(--pb-ink);
  border:1px solid var(--pb-rule);border-radius:6px;padding:7px 11px;cursor:pointer;line-height:1}
.pb-nav button:hover:not(:disabled),.pb-all:hover{border-color:var(--pb-ink3)}
/* on a desktop the arrows are the whole navigation, so they read as buttons rather than decoration */
@media (hover:hover) and (pointer:fine){
  .pb-nav button{font-size:17px;padding:8px 15px;background:var(--pb-bg2)}
  .pb-nav button:hover:not(:disabled){background:var(--pb-acc);border-color:var(--pb-acc);color:#fff}
}
.pb-nav button:disabled{opacity:.4;cursor:default}
.pb-nav button:focus-visible,.pb-all:focus-visible{outline:2px solid var(--pb-acc);outline-offset:2px}
.pb-search{flex:none;position:relative;padding:10px 16px;border-bottom:1px solid var(--pb-rule)}
.pb-search input{font:inherit;font-size:14px;width:100%;padding:9px 30px 9px 11px;border:1px solid var(--pb-rule);
  border-radius:6px;background:var(--pb-bg);color:var(--pb-ink)}
.pb-search input:focus{outline:none;border-color:var(--pb-acc);box-shadow:0 0 0 3px var(--pb-bg2)}
.pb-search input::-webkit-search-cancel-button{display:none}
.pb-x{position:absolute;right:22px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--pb-ink3);
  font-size:14px;cursor:pointer;padding:4px 6px;line-height:1}
.pb-x:hover{color:var(--pb-ink)}
.pb-hits{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.pb-hits button{font:inherit;text-align:left;background:none;border:0;border-bottom:1px solid var(--pb-rule);
  padding:10px 0;cursor:pointer;color:var(--pb-ink)}
.pb-hits button:hover b,.pb-hits button:focus-visible b{color:var(--pb-acc)}
.pb-hits button b{display:block;font-size:15.5px;font-weight:600;margin-bottom:2px}
.pb-hits button span{display:block;font-size:13px;color:var(--pb-ink2);line-height:1.45}
.pb-body{flex:1;min-height:0;overflow:auto;padding:14px 16px 28px;-webkit-overflow-scrolling:touch}
.pb-name{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:0 0 4px;line-height:1.15}
.pb-sum{margin:0 0 6px;color:var(--pb-ink2);font-size:14.5px;line-height:1.5}
.pb-status{font-size:12px;color:var(--pb-acc);margin:0 0 12px}
.pb-body .q{padding:12px 0;border-top:1px solid var(--pb-rule)}
.pb-body .q:first-of-type{border-top:0}
.pb-body .q h3{margin:0 0 6px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--pb-acc);font-weight:600}
.pb-body .q p{margin:0 0 8px;line-height:1.6;font-size:15px}
.pb-body .q ul{margin:4px 0 8px;padding-left:20px}
.pb-body .q.sources{font-size:12.5px;color:var(--pb-ink2)}
.pb-body .q a{color:var(--pb-acc);word-break:break-word}
/* the dots: where you are among the parts */
.pb-dots{flex:none;display:flex;gap:4px;flex-wrap:wrap;padding:8px 16px 12px;border-top:1px solid var(--pb-rule)}
.pb-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:var(--pb-rule);cursor:pointer}
.pb-dots button[aria-current="true"]{background:var(--pb-acc);transform:scale(1.35)}
.pb-dots button:focus-visible{outline:2px solid var(--pb-acc);outline-offset:2px}
/* the swipe hint: shown once, until the first swipe */
.pb-hint{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:rgba(255,255,255,.72);
  backdrop-filter:blur(1.5px);cursor:pointer;text-align:center;padding:20px}
.pb-hint[hidden]{display:none}
.pb-hint .pb-hint-in{max-width:22ch}
.pb-hint svg{width:120px;height:auto;display:block;margin:0 auto 10px}
.pb-hint b{display:block;font-size:16px;color:var(--pb-ink);margin-bottom:4px}
.pb-hint span{font-size:13.5px;color:var(--pb-ink2);line-height:1.45}
.pb-swipe-hand{animation:pb-swipe 2.4s ease-in-out infinite}
@keyframes pb-swipe{0%,100%{transform:translateX(16px)}45%{transform:translateX(-16px)}}
@media (prefers-reduced-motion:reduce){.pb-swipe-hand{animation:none}}
/* phone: the machine on top, the part underneath, still half and half */
@media (max-width:820px){
  /* Half and half of what is actually on the screen: the page chrome above has to give way, or the words
     end up in a two-line slot under a picture that took the lot. */
  .pb{grid-template-columns:1fr;grid-template-rows:1fr 1fr;height:calc(100dvh - var(--pb-chrome,150px));min-height:540px}
  .pb-panel{border-left:0;border-top:1px solid var(--pb-rule)}
  .pb-head{padding:10px 14px 8px}
  .pb-name{font-size:19px}
  .pb-body{padding:12px 14px 24px}
  .pb-dots{display:none}
}