/* Shared select-only and editable pickers use the same dark surfaces as the system picker. */
.viscanon-picker{position:relative;display:block;min-width:0;width:100%;text-align:left}
.viscanon-picker[hidden],.viscanon-picker-menu[hidden],.viscanon-picker-error[hidden]{display:none!important}
/* Retain native values, selectedOptions, form validation and existing change handlers. */
.viscanon-picker>select.viscanon-picker-source{position:absolute!important;inset:0 auto auto 0!important;width:1px!important;min-width:0!important;max-width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;clip-path:inset(50%)!important}
.viscanon-picker>.viscanon-picker-control,.viscanon-picker>input.viscanon-picker-input{box-sizing:border-box;display:block;width:100%;max-width:100%;min-width:0;min-height:40px;margin:0;padding:10px 38px 10px 12px;border:1px solid #2d465f;border-radius:7px;background-color:var(--entry-field-surface,#0c1b2b);color:var(--entry-field-text,#e8f1f7);font:inherit;font-size:14px;font-weight:400;line-height:1.35;text-align:left;letter-spacing:normal;text-transform:none;box-shadow:none;color-scheme:dark}
.viscanon-picker>.viscanon-picker-control{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2366c5e7' stroke-width='1.5'/%3E%3C/svg%3E");background-position:right 13px center;background-repeat:no-repeat}
.viscanon-picker>.viscanon-picker-control:hover:not(:disabled),.viscanon-picker>input.viscanon-picker-input:hover:not(:disabled){border-color:#456a86;background-color:var(--entry-field-surface,#0c1b2b);color:var(--entry-field-text,#e8f1f7)}
.viscanon-picker>.viscanon-picker-control:focus-visible,.viscanon-picker>input.viscanon-picker-input:focus-visible{outline:2px solid #66c5e7;outline-offset:2px;border-color:#66c5e7}
.viscanon-picker>.viscanon-picker-control:disabled,.viscanon-picker>input.viscanon-picker-input:disabled{opacity:.62;cursor:not-allowed}
.viscanon-picker>[aria-invalid=true]{border-color:#e89d99}
.viscanon-picker>.viscanon-picker-toggle{position:absolute;top:1px;right:1px;width:36px;height:38px;min-width:0;min-height:0;padding:0;margin:0;border:0;border-radius:6px;background:transparent;color:#66c5e7;font:inherit;font-size:20px;box-shadow:none;cursor:pointer}
.viscanon-picker>.viscanon-picker-toggle:hover:not(:disabled){background:#173148;color:#e8f1f7}
.viscanon-picker>.viscanon-picker-toggle:disabled{opacity:.4;cursor:default}
.viscanon-picker>input[type=search]::-webkit-search-decoration,.viscanon-picker>input[type=search]::-webkit-search-cancel-button{appearance:none}
.viscanon-picker-error{display:block;margin:6px 0 0;color:#ffc5bd;font-size:13px;line-height:1.4}
/* Manual popovers enter the top layer, so modal/overflow panels cannot clip options. */
.viscanon-picker-menu{box-sizing:border-box;position:fixed;inset:auto;z-index:2147483000;margin:0;padding:5px;border:1px solid #42536a;border-radius:8px;background:#0c1b2b;color:#eaf2fa;box-shadow:0 12px 30px #0008;max-height:280px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#456a86 #0c1b2b;font:14px/1.4 Inter,system-ui,sans-serif;text-align:left;color-scheme:dark}
.viscanon-picker-menu::backdrop{background:transparent;pointer-events:none}
.viscanon-picker-menu [role=option]{position:relative;box-sizing:border-box;min-height:38px;margin:0;padding:9px 28px 9px 10px;border:0;border-radius:4px;color:#eaf2fa;white-space:normal;overflow-wrap:anywhere;cursor:pointer}
.viscanon-picker-menu [role=option][aria-selected=true]::after{content:'✓';position:absolute;right:9px;top:9px;color:#79d7f3}
.viscanon-picker-menu [role=option]:hover:not([aria-disabled=true]),.viscanon-picker-menu [role=option][data-active=true]{background:#205b85;color:#fff}
.viscanon-picker-menu [role=option][aria-disabled=true]{opacity:.48;cursor:not-allowed}
.viscanon-picker-group{padding:9px 10px 5px;color:#aabed1;font-size:12px;font-weight:600}
.viscanon-picker-empty{padding:11px 10px;color:#aabed1;font-size:13px}
@media(pointer:coarse){.viscanon-picker>.viscanon-picker-control,.viscanon-picker>input.viscanon-picker-input{min-height:44px;font-size:16px}.viscanon-picker>.viscanon-picker-toggle{height:42px}.viscanon-picker-menu [role=option]{min-height:44px;padding-top:12px;padding-bottom:12px}}
@media(forced-colors:active){.viscanon-picker>.viscanon-picker-control,.viscanon-picker>input.viscanon-picker-input,.viscanon-picker-menu{border:1px solid ButtonText}.viscanon-picker-menu [role=option][data-active=true]{outline:2px solid Highlight;outline-offset:-2px}.viscanon-picker-menu [role=option][aria-selected=true]::after{color:ButtonText}}

/* Related-location selectors are actions below their thumbnail, matching the
   neighboring Choose characters / more-scenes buttons without retheming pickers. */
.story-connections .profile-related-list:has(+ .connection-select){margin-bottom:0}
.story-connections .connection-select{display:block;min-width:0;margin-top:14px}
.story-connections .profile-related-list:empty + .connection-select{margin-top:0}
.story-connections .connection-select :is(select:not(.viscanon-picker-source),.viscanon-picker-control){
  box-sizing:border-box;width:100%;min-height:var(--ui-control-height,40px);margin:0;
  padding:9px 38px;border:1px solid var(--line,#2d465f);
  border-radius:var(--ui-control-radius,7px);background-color:var(--panel2,#111827);
  color:var(--cream,#f1f4f7);font-family:var(--ui-font,inherit);font-size:.875rem;
  font-weight:400;line-height:1.25;text-align:center;cursor:pointer;
}
.story-connections .connection-select :is(select:not(.viscanon-picker-source),.viscanon-picker-control):hover:not(:disabled){border-color:var(--line,#2d465f);background-color:var(--panel2,#111827);color:var(--cream,#f1f4f7);filter:brightness(1.1)}
.story-connections .connection-select :is(select:not(.viscanon-picker-source),.viscanon-picker-control):focus-visible{border-color:var(--bright,#66c5e7);outline:2px solid #a5dff3;outline-offset:3px}
.story-connections .connection-select :is(select:not(.viscanon-picker-source),.viscanon-picker-control):disabled{opacity:.62;cursor:not-allowed;filter:none}
.story-connections .connection-select :is(select:not(.viscanon-picker-source),.viscanon-picker-control)[aria-invalid=true]{border-color:#e89d99}
@media(pointer:coarse){.story-connections .connection-select :is(select:not(.viscanon-picker-source),.viscanon-picker-control){min-height:44px}}
@media(forced-colors:active){.story-connections .connection-select :is(select:not(.viscanon-picker-source),.viscanon-picker-control){border-color:ButtonText}}

/* Wrapping a lore field must retain the label spacing of neighboring textareas. */
.entry-profile .location-setting-fields label > .viscanon-picker{margin-top:8px}
/* The arrow shares the input's grid row, so variable/coarse-pointer heights and
   validation messages cannot move it off center. Keep the existing accessible
   button label; replace the font-dependent glyph with the select chevron. */
.viscanon-picker:has(> .viscanon-picker-input){display:grid;grid-template-columns:minmax(0,1fr)}
.viscanon-picker > .viscanon-picker-input{grid-area:1 / 1}
.viscanon-picker > .viscanon-picker-toggle{
  grid-area:1 / 1;position:relative;inset:auto;justify-self:end;align-self:stretch;
  /* The retained, font-size:0 glyph is still a layout item. Flex avoids the
     extra grid row that otherwise lifts the visible chevron above center. */
  display:flex;align-items:center;justify-content:center;width:36px;height:auto;min-height:0;margin:1px;
  font-size:0;line-height:1;
}
.viscanon-picker > .viscanon-picker-toggle::before{
  content:"";width:12px;height:8px;
  background:center / 12px 8px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2366c5e7' stroke-width='1.5'/%3E%3C/svg%3E");
}
.viscanon-picker:has(> .viscanon-picker-input) > .viscanon-picker-error{grid-area:2 / 1}
/* Hierarchy's native select margin no longer supplies spacing once wrapped. */
.entry-profile .location-organization > .viscanon-picker{margin-top:8px}