/* UI-1: the house select (static/js/fsw-select.js). Tokens from fsw.css only: no colour, font, radius or spacing of its
   own, no border, the focus ring is the only outline, the chosen row wears the selection ring (never a glow).

   The real <select> stays in the form under the skin as the value carrier: it keeps the field's size and place in the
   layout, invisible, and the skin (a button) lies exactly over it. */
.fsw-sel { position: relative; display: inline-flex; vertical-align: middle; max-width: 100%; }
.fsw-sel--fill { display: flex; width: 100%; }
.fsw-sel > select.fsw-sel__native { opacity: 0; pointer-events: none; flex: 1 1 auto; min-width: 0; margin: 0; }
.fsw-sel > select.fsw-sel__native--pic { padding-left: calc(var(--sp-12) + 24px + var(--sp-8)); }
/* the fields in a form row are pinned to the bottom of the row (fsw.css, AL-2): the skin's wrapper is that field now */
:is(.field-row, .field-row-3, .field-row-4) > .field > .fsw-sel { margin-top: auto; }

/* the closed field: the field's own fill, text and shape (the script copies the select's padding, radius and size) */
.fsw-sel__btn {
  position: absolute; inset: 0; display: flex; align-items: center; gap: var(--sp-8); width: 100%; margin: 0;
  padding: 0 var(--sp-12); border: 0; background: var(--field-bg); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; min-width: 0;
}
.fsw-sel__btn:hover { background: var(--panel-2); }
.fsw-sel__btn:focus { outline: none; }
.fsw-sel__btn:focus-visible, .fsw-sel__btn.is-open { box-shadow: var(--ring-focus); }
.fsw-sel__btn:disabled { opacity: .6; cursor: not-allowed; }
.fsw-sel__btn:disabled:hover { background: var(--field-bg); }
.fsw-sel__btn.is-empty .fsw-sel__text { color: var(--ink-soft); }
.fsw-sel__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsw-sel__caret { flex: 0 0 auto; width: var(--sp-8); height: var(--sp-4); background: var(--ink-soft); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.fsw-sel__btn.is-open .fsw-sel__caret { transform: scaleY(-1); }

/* the person's circle: 24px, in the row and in the closed field */
.fsw-sel__pic {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; overflow: hidden; background: var(--panel-hover); color: #fff;
  font-size: var(--fs-badge); font-weight: 700; line-height: 1; letter-spacing: .02em;
}
.fsw-sel__pic[hidden] { display: none; }
.fsw-sel__pic img { display: block; width: 24px; height: 24px; object-fit: cover; }

/* the open list: anchored (fixed, placed by the script), on --panel-2 like the account menu and the search list */
.fsw-sel__list {
  position: fixed; z-index: 12500; display: flex; flex-direction: column; box-sizing: border-box;
  padding: var(--sp-8); background: var(--panel-2); border-radius: var(--r-md); box-shadow: var(--shadow-1);
  font-family: var(--font); font-size: var(--fs-ui); color: var(--ink);
}
.fsw-sel__rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; position: relative; }
.fsw-sel__filter {
  flex: 0 0 auto; width: 100%; height: var(--ctl-h-sm); margin: 0 0 var(--sp-8); padding: 0 var(--sp-12); border: 0;
  border-radius: var(--r-sm); background: var(--field-bg); color: var(--ink); font: inherit; font-size: var(--fs-input);
}
.fsw-sel__filter:focus { outline: none; box-shadow: var(--ring-focus); }
.fsw-sel__heading { padding: var(--sp-8) var(--sp-12) var(--sp-4); color: var(--ink-faint); font-size: var(--fs-ui); font-weight: 600; }
.fsw-sel__opt {
  display: flex; align-items: center; gap: var(--sp-8); min-height: var(--ctl-h-sm); padding: 0 var(--sp-12);
  border-radius: var(--r-sm); color: var(--ink); cursor: pointer; white-space: nowrap;
}
.fsw-sel__opt.is-active { background: var(--panel-hover); color: #fff; }
.fsw-sel__opt[aria-selected="true"] { box-shadow: var(--ring-selected); }
.fsw-sel__opt[aria-disabled="true"] { color: var(--ink-faint); cursor: not-allowed; }
.fsw-sel__opt[aria-disabled="true"].is-active { background: none; color: var(--ink-faint); }
.fsw-sel__opt[hidden], .fsw-sel__group[hidden], .fsw-sel__none[hidden] { display: none; }
.fsw-sel__label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fsw-sel__second { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-faint); }
.fsw-sel__none { display: flex; align-items: center; min-height: var(--ctl-h-sm); padding: 0 var(--sp-12); color: var(--ink-faint); }

/* a phone or any coarse pointer: the NATIVE select opens (the OS list is the accessible one there); the skin only paints
   the closed field, with the picture, and lets the touch through to the real select on top of it */
@media (pointer: coarse) {
  .fsw-sel__btn { pointer-events: none; }
  .fsw-sel > select.fsw-sel__native { pointer-events: auto; position: relative; z-index: 1; }
}