/* Pin one note in Explore Variants (pin.js) */
.pinbtn{float:right;margin:-2px 0 4px 10px;font:inherit;font-size:.85rem;color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:3px;padding:1px 10px;cursor:pointer}
.pinbtn:hover{border-color:var(--ink)}
.res.pinned{border-left:6px solid var(--rubric);padding-left:11px;background:#f1e9d9}
.res.pinned .pinbtn{background:var(--rubric);border-color:var(--rubric);color:#f6efe6}
.res.pinned{scroll-margin-top:200px}

.pinbar{position:sticky;top:60px;z-index:15;background:var(--vellum);border:1px solid var(--rule);border-top:3px solid var(--rubric);border-radius:3px;padding:8px 10px;margin:0 0 10px;box-shadow:0 2px 6px rgba(31,42,54,.12)}
.pinbar[hidden]{display:none}
.pinrow{display:flex;align-items:center;gap:8px}
.pinrow2{margin-top:6px;flex-wrap:wrap}
.pinhint{font-size:.84rem;color:var(--ink-soft);font-style:italic}
.pinnav{flex:0 0 auto;font:inherit;font-size:1rem;color:#f6efe6;background:var(--rubric);border:1px solid var(--rubric);border-radius:3px;padding:8px 16px;min-width:110px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.pinnav:hover{background:var(--rubric-dark)}
.pinnav:disabled{opacity:.4;cursor:default}
.pinnav.pinheld{background:var(--rubric-dark);box-shadow:inset 0 0 0 2px #f6efe6}
.pincount{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;gap:1px;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:3px;padding:5px 6px;cursor:pointer;min-width:0}
.pinpos{font-size:1.05rem;font-variant-numeric:tabular-nums}
.pinref{font-size:.82rem;color:var(--ink-soft)}
.pincount.pinout .pinpos{color:var(--rubric);font-style:italic;font-size:.95rem}
.pinlite{font:inherit;font-size:.92rem;color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:3px;padding:3px 12px;cursor:pointer}
.pinlite:hover{background:rgba(31,42,54,.07)}
.pinlink{order:2;margin-left:auto;font:inherit;font-size:.88rem;color:var(--ink-soft);background:none;border:0;padding:3px 4px;text-decoration:underline;cursor:pointer}
.pinlink:hover{color:var(--rubric)}
.pinrow2 .pinhint{order:1}
.pinmsg{flex:1;font-size:.95rem}
.pinbar:not(.pinundo) .pinundorow{display:none}
.pinbar.pinundo > :not(.pinundorow){display:none}
.pinlink:focus-visible{outline:2px solid var(--rubric);outline-offset:2px}
.pinjump{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;padding-top:8px;border-top:1px dotted var(--rule)}
.pinjump[hidden]{display:none}
.pinjump input{font:inherit;width:6em;padding:3px 6px;border:1px solid var(--rule);border-radius:3px}
.pinnav:focus-visible,.pincount:focus-visible,.pinlite:focus-visible,.pinbtn:focus-visible{outline:2px solid var(--rubric);outline-offset:2px}
@media (max-width:640px){
  .pinrow2 .pinhint{order:3;flex:1 0 100%}
  .pinbar{position:fixed;top:auto;bottom:0;left:0;right:0;margin:0;border-radius:0;border-left:0;border-right:0;z-index:35;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .pinnav{min-width:0;padding:12px 10px;flex:1 1 0}
  .pincount{flex:1.3 1 0;padding:8px 4px}
  .res.pinned{padding-left:7px;scroll-margin-top:12px;scroll-margin-bottom:170px}
  body.pin-on{padding-bottom:150px}
  body.pin-on .jump{bottom:calc(160px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:640px) and (display-mode:standalone){
  /* the home-screen app reaches the curved bottom corners of the phone: keep the bar's text and links inside the comfortable area */
  .pinbar{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));padding-bottom:max(30px,env(safe-area-inset-bottom))}
  body.pin-on{padding-bottom:180px}
  body.pin-on .jump{bottom:calc(192px + env(safe-area-inset-bottom,0px))}
  .res.pinned{scroll-margin-bottom:200px}
}