/* Red's UI controls: the ONE dropdown and the ONE input look, shared by the staff site, the member portal and the public site.
   Standard (memory/ui-control-standard.md):
     - a dropdown is a styled button + listbox over a real <select> (ui-controls.js); never ship a bare native <select> for a visible filter or form dropdown
     - member / public = the PILL closed look   (.ui-dd--pill)
     - staff           = the FIELD closed look  (.ui-dd--field), the same box as a text input
     - both open the same menu (.ui-dd-pop): check mark on the selected option, arrow / Enter / Esc / type-ahead keys, a bottom sheet on a phone
     - search boxes and text inputs share one height, border, radius, focus ring, placeholder colour and search icon
   Plain CSS, no build. Colours come from the page's own tokens with fallbacks, so the file works under staff.css, member.css and site.css. */

:root{--ui-border:#8B857E;--ui-h:44px;--ui-field-r:9px;}

/* ---------- Dropdown: shared parts ---------- */
.ui-dd{--ui-ink:var(--ink,#292623);--ui-card:var(--card,var(--white,#fff));--ui-muted:var(--muted-2,var(--muted,#57524D));--ui-ground:var(--ground,var(--light,#F4F3F1));--ui-red:var(--red,#C8102E);--ui-tint:var(--red-tint,#FBEAEC);--ui-edge:var(--ui-border,#8B857E);
  position:relative;display:block;font-family:var(--sans,inherit);}
.ui-dd-btn{appearance:none;-webkit-appearance:none;width:100%;min-height:var(--ui-h,44px);margin:0;padding:0 38px 0 16px;border:1px solid var(--ui-edge);background:var(--ui-card);color:var(--ui-ink);font-family:inherit;font-size:13px;font-weight:700;line-height:1.2;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;display:block;box-sizing:border-box;}
.ui-dd-btn::after{content:'';position:absolute;right:15px;top:50%;margin-top:-6px;width:7px;height:7px;border-right:2px solid var(--ui-muted);border-bottom:2px solid var(--ui-muted);transform:rotate(45deg);transition:transform .12s;}
.ui-dd.is-open .ui-dd-btn::after{transform:rotate(225deg);margin-top:-1px;}
.ui-dd-btn:hover{background:var(--ui-ground);}
.ui-dd-btn:focus-visible{outline:2px solid var(--ui-red);outline-offset:2px;}
.ui-dd-btn:disabled{cursor:not-allowed;opacity:.6;}
.ui-dd-btn[aria-invalid="true"]{border-color:var(--ui-red);}
.ui-dd-src{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;opacity:0;pointer-events:none;}
.select-wrap.is-enhanced::after{display:none;}

/* The closed look: PILL (member and public) */
.ui-dd--pill{min-width:190px;}
.ui-dd--pill .ui-dd-btn{border-radius:100px;color:var(--ui-muted);}
.ui-dd--pill.is-set .ui-dd-btn{border-color:var(--ui-red);color:var(--ui-ink);box-shadow:inset 0 0 0 1px var(--ui-red);}

/* The closed look: FIELD (staff): the same box as a text input */
.ui-dd--field{min-width:0;}
.ui-dd--field .ui-dd-btn{border-radius:var(--ui-field-r,9px);padding:0 38px 0 14px;font-size:14.5px;font-weight:400;color:var(--ui-ink);}
.ui-dd--field .ui-dd-btn:focus-visible{border-color:var(--ui-red);}

/* The open menu (the same for both) */
.ui-dd-pop{position:absolute;z-index:200;left:0;top:calc(100% + 6px);min-width:100%;width:max-content;max-width:min(360px,90vw);max-height:min(320px,60vh);overflow:auto;margin:0;padding:6px;list-style:none;background:var(--ui-card);border:1px solid var(--ui-edge);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.14);box-sizing:border-box;}
.ui-dd-pop[hidden]{display:none;}
.ui-dd-pop.is-fixed{position:fixed;}
.ui-dd-opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px 0 10px;border-radius:9px;font-size:14px;font-weight:600;line-height:1.25;color:var(--ui-ink);cursor:pointer;}
.ui-dd-opt .ui-tick{flex:0 0 18px;width:18px;height:18px;color:var(--ui-red);visibility:hidden;}
.ui-dd-opt[aria-selected="true"]{font-weight:800;}
.ui-dd-opt[aria-selected="true"] .ui-tick{visibility:visible;}
.ui-dd-opt.is-active{background:var(--ui-tint);}
.ui-dd-opt[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
.ui-dd-list{list-style:none;margin:0;padding:0;}
.ui-dd-list:focus{outline:none;}
.ui-dd-head,.ui-dd-scrim{display:none;}
@media (forced-colors:active){.ui-dd-opt.is-active{outline:2px solid Highlight;outline-offset:-2px;}.ui-dd-btn{border-color:ButtonText;}}

@media (max-width:640px){
  .ui-dd,.ui-dd--pill,.ui-dd--field{min-width:0;width:100%;}
  .ui-dd--field .ui-dd-btn{font-size:16px;}
  .ui-dd.is-open .ui-dd-scrim{display:block;position:fixed;inset:0;z-index:199;background:rgba(0,0,0,.4);}
  .ui-dd-pop,.ui-dd-pop.is-fixed{position:fixed;z-index:200;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;max-height:75vh;border-radius:18px 18px 0 0;padding:8px 10px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.2);}
  .ui-dd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 10px;font-size:15px;font-weight:800;color:var(--ui-ink);position:sticky;top:-8px;background:var(--ui-card);}
  .ui-dd-x{min-height:44px;min-width:44px;border:0;background:none;color:var(--ui-muted);font:700 13px var(--sans,inherit);cursor:pointer;border-radius:10px;}
  .ui-dd-opt{min-height:48px;font-size:15px;}
}

/* ---------- Inputs: one look ---------- */
/* Written with :where() so the rule has no weight of its own: a page that must differ (the large sign-in boxes, a prefixed amount) simply says so.
   Staff and member forms (.field) and the staff find bar (.sk-tool): 44px, 1px #8B857E, 9px radius, 14.5px, the red focus ring, one placeholder colour. */
:where(.field,.sk-tool) :where(input:where(:not([type]),[type=text],[type=search],[type=email],[type=tel],[type=url],[type=number],[type=password],[type=date],[type=time],[type=datetime-local]),textarea){box-sizing:border-box;min-height:var(--ui-h,44px);border:1px solid var(--ui-border,#8B857E);border-radius:var(--ui-field-r,9px);background-color:var(--card,#fff);color:var(--ink,#292623);padding:0 14px;font-family:var(--sans,inherit);font-size:14.5px;font-weight:400;line-height:1.3;}
:where(.field) textarea{padding:10px 14px;line-height:1.45;}
:where(.field,.sk-tool) :where(input,textarea):focus-visible{outline:2px solid var(--red,#C8102E);outline-offset:2px;border-color:var(--red,#C8102E);}
:where(.field) :where(input,textarea)[aria-invalid="true"]{border-color:var(--red,#C8102E);}
:where(.field) :where(input,textarea):disabled{background-color:var(--ground,#F4F3F1);color:var(--muted,#69645E);cursor:not-allowed;}
:where(.sk-tool) input{width:100%;}
input::placeholder,textarea::placeholder{color:var(--muted,#69645E);opacity:1;}
/* The search icon: every search box has it, in the same place. */
:where(.field,.sk-tool) input[type=search]{padding-left:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2369645E' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:14px 50%;background-size:18px 18px;}
/* Member side: a find or saved-view name box sits beside the pill, so it is a pill too: same height, border, focus ring and placeholder. */
:where(body:not(.view-staff)) :where(.sv-form input,.field input[type=search]){border-radius:100px;}
@media (max-width:600px){:where(.field,.sk-tool) :where(input,textarea){font-size:16px;}}