/* Paper tabs + floating ink menus. Shared by every select on every hub. */
.ink-select {
  position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:18px;
  min-width:0; max-width:100%; min-height:44px; padding:10px 14px; cursor:pointer;
  border:0; border-radius:0; background:var(--surface-2); color:var(--ink);
  font:14px/1.4 var(--font-body); text-align:left; isolation:isolate;
  transition:background .16s ease,color .16s ease;
}
.ink-select::before { content:''; position:absolute; inset:0; background:var(--ri-frame) center/100% 100% no-repeat; opacity:.65; pointer-events:none; }
.ink-select:hover,.ink-select[aria-expanded=true] { background:var(--surface-3); }
.ink-select[aria-expanded=true]::after { content:''; position:absolute; inset:auto 5px -2px; height:4px; background:var(--accent); mask:var(--ri-rule) center/100% 100% no-repeat; }
.ink-select:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.ink-select:disabled { opacity:.45; cursor:not-allowed; }
.ink-select__value { min-width:0; overflow-wrap:anywhere; }
.ink-select__arrow { flex:0 0 17px; width:17px; height:14px; color:var(--accent); transition:transform .18s ease; }
.ink-select[aria-expanded=true] .ink-select__arrow { transform:rotate(180deg); }
.c-field > .ink-select,.ref-control > .ink-select { width:100%; }
.ri-map-preview__head .ink-select { min-width:150px; background:transparent; }
.ri-map-preview__head .ink-select::before { inset:auto 0 0; height:3px; background:var(--ri-rule) center/100% 100%; }
.ink-select-menu {
  position:fixed; inset:auto; margin:0; padding:10px; box-sizing:border-box; z-index:3000;
  display:flex; flex-direction:column; overflow:hidden; max-width:calc(100vw - 20px);
  border:0; border-radius:0; color:var(--ink); background:var(--surface-1);
  background-image:url('../assets/ink/paper.svg');
  box-shadow:6px 7px 0 color-mix(in srgb,var(--ink) 18%,transparent),0 16px 45px #0003;
  font:14px/1.4 var(--font-body); text-transform:none; letter-spacing:normal;
  animation:ink-select-in .15s ease-out; transform-origin:top center;
}
.ink-select-menu::before { content:''; position:absolute; inset:0; background:var(--ri-frame) center/100% 100% no-repeat; pointer-events:none; opacity:.95; }
.ink-select-menu[data-direction=up] { transform-origin:bottom center; }
.ink-select-menu__head { flex:none; padding:5px 10px 10px; color:var(--ink-muted); font:10px/1.4 var(--font-mono); text-transform:uppercase; letter-spacing:.11em; }
.ink-select-menu__list { position:relative; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--ink-faint) transparent; }
.ink-select-option { position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:44px; padding:10px 12px; cursor:pointer; isolation:isolate; }
.ink-select-option__label { overflow-wrap:anywhere; }
.ink-select-option__mark { flex:0 0 20px; font:20px/1 var(--font-note); text-align:center; }
.ink-select-option[aria-selected=true] { color:var(--accent); font-weight:600; }
.ink-select-option.is-active { color:var(--ink-ondark); }
.ink-select-option.is-active::before { content:''; position:absolute; inset:1px 0; background:var(--ink); mask:var(--ri-brush) center/100% 100% no-repeat; z-index:-1; }
.ink-select-option[aria-disabled=true] { opacity:.4; cursor:not-allowed; }
@keyframes ink-select-in { from { opacity:0; transform:translateY(-3px) scaleY(.98); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { .ink-select-menu { animation:none; } .ink-select,.ink-select__arrow { transition:none; } }
@media(forced-colors:active) { .ink-select,.ink-select-menu { border:1px solid ButtonText; } .ink-select-option.is-active { color:HighlightText; background:Highlight; } .ink-select-option[aria-selected=true] { outline:1px solid Highlight; } }