/* Forms: inputs, select, textarea, checkboxes, range, chips, segments, fields and errors, filter bar, switches. */
input{font:inherit;color:inherit;touch-action:manipulation}
/* select: one drawn chevron in the text colour, room for it on the right */
select{font:inherit;touch-action:manipulation;width:100%;min-height:var(--ctl-h);border:1px solid var(--hair-strong);background-color:var(--paper);color:var(--ink);padding:10px 13px;border-radius:0;font-family:var(--display);font-size:var(--fs-body);line-height:1.35;appearance:none;-webkit-appearance:none;transition:border-color .15s,box-shadow .15s;margin:0;cursor:pointer;padding-right:40px;text-overflow:ellipsis;white-space:nowrap;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
textarea{font:inherit;touch-action:manipulation;width:100%;border:1px solid var(--hair-strong);background-color:var(--paper);color:var(--ink);padding:10px 13px;border-radius:0;font-family:var(--display);font-size:var(--fs-body);appearance:none;-webkit-appearance:none;transition:border-color .15s,box-shadow .15s;margin:0;min-height:112px;resize:vertical;line-height:1.45}
/* chips + tags + status */
/* ---------- chips ---------- */
.chip{font-family:var(--mono);font-size:var(--fs-caption);border:1px solid var(--hair-strong);background:transparent;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;cursor:pointer;min-height:var(--ctl-h-sm);padding:0 13px;gap:6px;line-height:1.2;justify-content:center;white-space:nowrap;border-radius:0;transition:background-color .15s,color .15s}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--on-accent)}
.chip:disabled{opacity:.45;cursor:not-allowed}
/* forms */
/* field label + hint */
.field{display:grid;gap:7px;min-width:0}
.field > span{font-family:var(--mono);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.05em;line-height:1.35}
.field small{color:var(--muted);font-size:var(--fs-ui);line-height:1.4}
input:disabled,textarea:disabled{opacity:.55}
/* ---------- range sliders ---------- */
/* the filled part follows --pct, which SS.ui keeps in sync on every input event */
input[type=range]{--pct:50%;--fill:var(--ink);--rest:var(--hair);--thumb:var(--accent);--thumb-b:var(--on-accent);appearance:none;-webkit-appearance:none;width:100%;height:var(--ctl-h);background:transparent;margin:0;padding:0;cursor:pointer;accent-color:auto;touch-action:pan-y}
/* label + box: the box sits on the first text line; long text wraps under itself; the whole row is a 44px target */
.check{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-body-s);line-height:22px;min-height:44px;padding-block:11px;margin-block:-6px;cursor:pointer;-webkit-user-select:none;user-select:none}
.check input{width:20px;height:20px;margin-top:1px;flex:0 0 20px}
.err{color:var(--bad);min-height:0;font-size:var(--fs-small);line-height:1.4}
.err:empty{display:none}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.tabs{margin-bottom:18px}
/* mentor directory + cards */
.filterbar{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:end;padding-block:16px;border-bottom:1px solid var(--hair)}
.filterbar .field{min-width:160px}
.filterbar .check{padding-bottom:11px;margin-block:0}
@media (max-width:600px){
  .filterbar .field{min-width:calc(50% - 8px);flex:1}
}
/* ---------- text fields, selects, textareas ---------- */
:is(input:not([type]),input[type=text],input[type=email],input[type=number],input[type=url],input[type=search],input[type=password],input[type=tel],input[type=date],input[type=time],input[type=datetime-local]){width:100%;min-height:var(--ctl-h);border:1px solid var(--hair-strong);background-color:var(--paper);color:var(--ink);padding:10px 13px;border-radius:0;font-family:var(--display);font-size:var(--fs-body);line-height:1.35;appearance:none;-webkit-appearance:none;transition:border-color .15s,box-shadow .15s;margin:0}
:is(input,select,textarea)::placeholder{color:var(--muted);opacity:1}
:is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]):focus{outline:0}
:is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]):focus-visible,:is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea):focus{outline:0;border-color:var(--ink);box-shadow:var(--ring)}
:is(input,select,textarea):disabled{background-color:var(--ground);color:var(--muted);border-color:var(--hair);opacity:1;cursor:not-allowed;-webkit-text-fill-color:var(--muted)}
:is(input,textarea)[readonly]{background-color:var(--ground)}
/* number: no spinner arrows, tabular digits */
input[type=number]{font-variant-numeric:tabular-nums;-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* search: a drawn magnifier on the left, the native clear button kept */
input[type=search]{padding-left:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B6750' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='M10.4 10.4 14 14'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:13px 50%;background-size:16px 16px}
input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
input[type=search]::-webkit-search-cancel-button{cursor:pointer}
select:disabled{cursor:not-allowed}
select option{background:var(--paper);color:var(--ink)}
@media (hover:hover){
  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea):not(:disabled):not(:focus):hover{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
}
/* invalid: shown after the person has touched the field (or tried to send), never on first paint */
:is(input,select,textarea):is([aria-invalid=true],:user-invalid):not([type=checkbox]):not([type=radio]){border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
:is(input,select,textarea):is([aria-invalid=true],:user-invalid):not([type=checkbox]):not([type=radio]):focus{box-shadow:0 0 0 1px var(--bad),0 0 0 4px var(--bad-bg)}
.field-err{color:var(--bad);font-size:var(--fs-small);line-height:1.35;margin:0;text-transform:none;letter-spacing:0;font-family:var(--display);display:flex;gap:6px;align-items:baseline}
.field-err::before{content:"✳";font-family:var(--mono);font-size:var(--fs-caption)}
.check + .field-err{margin-top:4px;padding-left:30px}
.err:not(:empty){border-left:2px solid var(--bad);padding:2px 0 2px 10px}
/* ---------- checkboxes + radios (custom, 20px, brand) ---------- */
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:0 0 20px;margin:0;display:inline-grid;place-content:center;border:1.5px solid var(--ink);background:var(--paper);cursor:pointer;vertical-align:middle;position:relative;transition:background-color .12s,border-color .12s}
input[type=radio]{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:0 0 20px;margin:0;display:inline-grid;place-content:center;border:1.5px solid var(--ink);background:var(--paper);cursor:pointer;vertical-align:middle;position:relative;transition:background-color .12s,border-color .12s;border-radius:var(--r-round)}
input[type=checkbox]:checked{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2315140E' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M4.5 10.2 8.3 14 15.5 6.3'/%3E%3C/svg%3E") center/16px 16px no-repeat;border-color:var(--on-accent)}
input[type=checkbox]:indeterminate{background:var(--accent) linear-gradient(var(--on-accent),var(--on-accent)) center/10px 2px no-repeat;border-color:var(--on-accent)}
input[type=radio]:checked{background:radial-gradient(circle,var(--on-accent) 0 3.5px,var(--accent) 4.5px);border-color:var(--on-accent)}
/* in dark mode the yellow fill keeps an ink border so it reads as the same control */
input[type=checkbox]:focus{outline:0}
input[type=radio]:focus{outline:0}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 2px var(--paper)}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.45;cursor:not-allowed}
@media (hover:hover){
  input[type=checkbox]:not(:disabled):not(:checked):hover,input[type=radio]:not(:disabled):not(:checked):hover{background-color:var(--mint)}
}
input[type=checkbox]:is([aria-invalid=true],:user-invalid){border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-bg)}
.check > input{width:20px;height:20px;margin:1px 0 0;flex:0 0 20px}
.check > span{min-width:0}
.check:has(input:disabled){cursor:not-allowed;color:var(--muted)}
input[type=range]:focus{outline:0}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(to right,var(--fill) 0 var(--pct),var(--rest) var(--pct) 100%)}
input[type=range]::-moz-range-track{height:4px;background:var(--rest)}
input[type=range]::-moz-range-progress{height:4px;background:var(--fill)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-10px;background:var(--thumb);border:1.5px solid var(--thumb-b);box-shadow:3px 3px 0 var(--thumb-b);transition:transform .12s}
input[type=range]::-moz-range-thumb{width:22px;height:22px;background:var(--thumb);border:1.5px solid var(--thumb-b);border-radius:0;box-shadow:3px 3px 0 var(--thumb-b)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.08)}
input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ink);outline-offset:3px}
input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid var(--ink);outline-offset:3px}
input[type=range]:disabled{opacity:.45;cursor:not-allowed}
.chip:focus{outline:0}
.chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.chip[aria-selected="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--on-accent)}
.chip[aria-pressed="true"]::before{content:"";width:6px;height:6px;background:currentColor;flex:0 0 6px}
.chip[data-like][aria-pressed="true"]::before{display:none}
.seg.tabs .chip[aria-pressed="true"]::before{display:none}
@media (hover:hover){
  .chip:not(:disabled):not([aria-pressed="true"]):hover{background:var(--mint);color:var(--ink)}
}
@media (max-width:760px),(pointer:coarse){
  .chip{min-height:44px}
  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){font-size:var(--fs-body)!important}
}
/* ---------- settings: email switch ---------- */
.set-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;min-height:44px}
.set-switch > span{display:grid;gap:2px;min-width:0}
.set-switch b{font-weight:500;font-size:var(--fs-body-s)}
.set-switch small{font-size:var(--fs-ui)}
.set-switch input[role=switch]{flex:0 0 46px;width:46px;height:26px;border-radius:var(--r-pill);border:1.5px solid var(--ink);background:var(--paper);position:relative;margin:0;cursor:pointer;transition:background-color .15s}
.set-switch input[role=switch]::before{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:var(--r-round);background:var(--ink);transition:transform .15s}
.set-switch input[role=switch]:checked{background:var(--accent);border-color:var(--on-accent)}
.set-switch input[role=switch]:checked::before{transform:translateX(20px);background:var(--on-accent)}
@media (prefers-reduced-motion:reduce){
  .set-switch input[role=switch]{transition:none}
  .set-switch input[role=switch]::before{transition:none}
}