/* the pin button (contract C1) and the tray; tokens come from search.css :root */
button.pin{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;margin-left:.5em;vertical-align:middle;
  border:1px solid transparent;border-radius:6px;background:transparent;color:var(--graphite);cursor:pointer;flex:none;opacity:.75;
  transition:color .12s,background .12s,opacity .12s}
button.pin svg{fill:currentColor;transform:rotate(25deg)}
button.pin:hover,button.pin:focus-visible{opacity:1;color:var(--red);background:var(--paper)}
button.pin[aria-pressed=true]{opacity:1;color:var(--red)}
button.pin[aria-busy=true]{cursor:progress;opacity:.4}
.head-actions{float:right;margin:0 0 0 .6em;line-height:1}.head-actions button.pin{margin:0}
@media (hover:none){button.pin{width:36px;height:36px;opacity:1}}
.pin-tray{position:fixed;right:16px;bottom:16px;z-index:40;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;
  background:var(--ink);color:var(--paper);border-radius:999px;font:600 14px/1 var(--sans);text-decoration:none;
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
.pin-tray:hover,.pin-tray:focus-visible{background:var(--violet);color:#fff}
.pin-tray svg{fill:currentColor;transform:rotate(25deg)}
.pin-tray[hidden]{display:none}
.pin-tray .pin-msg{font-weight:400;opacity:.85}
@media print{.pin-tray,button.pin{display:none}}
.cmp-pin{display:inline-flex}.cmp-pin button.pin{margin:0;opacity:1}
/* the board picker (opened by a pin button): a popover under the button, a bottom sheet on a phone */
.pin-pick{position:absolute;z-index:60;width:300px;max-width:calc(100vw - 16px);background:var(--sheet);color:var(--ink);
  border:1px solid var(--rule);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.22);padding:8px;font:400 14px/1.3 var(--sans)}
.pin-pick-q{box-sizing:border-box;width:100%;padding:8px 10px;margin:0 0 6px;border:1px solid var(--rule);border-radius:6px;
  background:var(--paper);color:inherit;font:inherit}
.pin-pick-q:focus{outline:2px solid var(--violet);outline-offset:-1px}
.pin-pick-list{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto}
.pin-pick-list li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:8px 10px;border-radius:6px;cursor:pointer}
.pin-pick-list li[aria-selected=true]{background:var(--violet);color:#fff}
.pin-pick-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pin-pick-d{flex:none;font-size:12px;opacity:.7}
.pin-pick-new{border-top:1px solid var(--rule);border-radius:0 0 6px 6px;font-weight:600}
@media (max-width:600px){.pin-pick{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;border-radius:14px 14px 0 0;
  padding:12px 12px calc(12px + env(safe-area-inset-bottom))}.pin-pick-list{max-height:45vh}.pin-pick-list li{padding:12px}}
@media print{.pin-pick{display:none}}