/* S22C: BMS contacts list and contact record. On top of tokens.css, app.css, bms.css. Tokens only. */
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/onest-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/onest-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

body{font-family:var(--font-body);color:var(--color-body);margin:0;background:var(--color-bg)}
.s22-main{max-width:1100px}
.s22-main a:focus-visible,.s22-main button:focus-visible,.s22-main summary:focus-visible,.s22-main input:focus-visible,.s22-main textarea:focus-visible,
.admin-nav a:focus-visible,.admin-sidebar-foot a:focus-visible,.s22-dlg button:focus-visible,.s22-dlg input:focus-visible,.s22-dlg textarea:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}
.s22-crumb{font-size:var(--t-xs);color:var(--color-muted);margin-bottom:var(--s-2)}
.s22-crumb a{color:var(--color-accent-text);font-weight:700;text-decoration:none}
button.btn{font-family:inherit;cursor:pointer}

/* list toolbar */
.s22-bar{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;margin-bottom:var(--s-3)}
.s22-bar .bms-chip-strip{margin-bottom:0}
.s22-bar .bms-sp{flex:1}
.s22-chip{font-family:inherit}
.s22-lbl{font-size:var(--t-xs);font-weight:800;color:var(--color-muted);text-transform:uppercase;letter-spacing:.04em;margin-right:var(--s-1)}
.s22-filters{background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-4);display:grid;gap:var(--s-2)}
.s22-filters .bms-chip-strip{margin-bottom:0;align-items:center}
.s22-sum{display:flex;gap:var(--s-5);flex-wrap:wrap;font-size:var(--t-sm);color:var(--color-muted);margin:0 0 var(--s-3)}
.s22-sum b{color:var(--color-ink)}

/* table */
.s22-tablewrap{background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto}
.s22-table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.s22-table th{text-align:left;padding:var(--s-3) var(--s-4);background:var(--color-bg);border-bottom:1px solid var(--color-line);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--color-muted);white-space:nowrap}
.s22-table th button{all:unset;cursor:pointer;font:inherit;text-transform:inherit;letter-spacing:inherit;color:inherit;font-weight:800;display:inline-flex;gap:.3rem;align-items:center}
.s22-table th button:hover,.s22-table th button[aria-sort] {color:var(--color-ink)}
.s22-table th button:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.s22-table th .ar{font-size:.7em;opacity:.5}
.s22-table th button[aria-sort] .ar{opacity:1;color:var(--color-accent-text)}
.s22-table td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--color-line);vertical-align:middle}
.s22-table tr:last-child td{border-bottom:none}
.s22-table tbody tr:hover td{background:var(--color-accent-wash)}
.s22-person{display:flex;align-items:center;gap:var(--s-3);min-width:220px}
.s22-person a{color:var(--color-ink);font-weight:700;text-decoration:none}
.s22-person a:hover{color:var(--color-accent-text);text-decoration:underline}
.s22-person .em{font-size:var(--t-xs);color:var(--color-muted)}
.s22-empty{padding:var(--s-8) var(--s-5);text-align:center;color:var(--color-muted)}
.s22-empty b{display:block;color:var(--color-ink);font-size:var(--t-base);margin-bottom:var(--s-1)}
.s22-foot{display:flex;gap:var(--s-3);align-items:center;margin-top:var(--s-3);font-size:var(--t-sm);color:var(--color-muted)}
.s22-bulk{display:flex;gap:var(--s-3);align-items:center;margin:0 0 var(--s-3);padding:var(--s-3) var(--s-4);background:var(--color-info-wash);color:var(--color-info-ink);border-radius:var(--radius-sm);font-size:var(--t-sm);font-weight:700}
.s22-bulk[hidden]{display:none}
.s22-bulk .bms-sp{flex:1}
.s22-td-pick{width:44px}

/* styled checkbox (C6) */
.s22-pick{position:relative;display:inline-flex;align-items:center;cursor:pointer;margin:0}
.s22-pick input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;inset:0}
.s22-box{width:20px;height:20px;border:2px solid var(--color-muted);border-radius:6px;background:var(--color-card);display:inline-block;position:relative;transition:.12s}
.s22-box::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--color-on-accent);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:.12s}
.s22-pick input:checked + .s22-box{background:var(--color-accent);border-color:var(--color-accent)}
.s22-pick input:checked + .s22-box::after{transform:rotate(45deg) scale(1)}
.s22-pick input:focus-visible + .s22-box{box-shadow:0 0 0 3px var(--color-accent-wash),0 0 0 5px var(--color-accent)}

/* inputs (C6: no browser default look) */
.s22-in{width:100%;box-sizing:border-box;font:inherit;font-size:var(--t-sm);color:var(--color-ink);background:var(--color-card);border:1.5px solid var(--color-line);border-radius:var(--radius-sm);padding:.55rem var(--s-3);appearance:none;-webkit-appearance:none}
.s22-in:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-wash)}
textarea.s22-in{min-height:6rem;resize:vertical;line-height:1.5}
.s22-field{display:grid;gap:var(--s-1);margin-bottom:var(--s-3)}
.s22-field label,.s22-field .l{font-size:var(--t-xs);font-weight:800;color:var(--color-ink)}
.s22-err{font-size:var(--t-xs);color:var(--color-danger-ink);font-weight:700}
.s22-err[hidden]{display:none}
.s22-row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
@media(max-width:560px){.s22-row2{grid-template-columns:1fr}}
.s22-choice{display:flex;gap:.4rem;flex-wrap:wrap}

/* panel + dialog */
.s22-panel{background:var(--color-card);border:1px solid var(--color-accent);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s-4) var(--s-5);margin-bottom:var(--s-5)}
.s22-panel[hidden]{display:none}
.s22-panel h2{margin:0 0 var(--s-3);font-size:var(--t-base);color:var(--color-ink);font-family:var(--font-head)}
.s22-actions{display:flex;gap:var(--s-2);justify-content:flex-end;flex-wrap:wrap;margin-top:var(--s-3)}
.s22-dlg{border:1px solid var(--color-line);border-radius:var(--radius);padding:0;max-width:34rem;width:calc(100% - 2rem);box-shadow:var(--shadow);background:var(--color-card);color:var(--color-body)}
.s22-dlg::backdrop{background:rgba(0,0,0,.35)}
.s22-dlg-in{padding:var(--s-5)}
.s22-dlg h2{margin:0 0 var(--s-2);font-size:var(--t-lg);font-family:var(--font-head);color:var(--color-ink)}
.s22-dlg p{margin:0 0 var(--s-3);font-size:var(--t-sm);line-height:1.55}
.s22-mail{border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-bg);padding:var(--s-3) var(--s-4);font-size:var(--t-sm);margin-bottom:var(--s-3)}
.s22-mail dl{display:grid;grid-template-columns:auto 1fr;gap:.15rem var(--s-3);margin:0 0 var(--s-2)}
.s22-mail dt{color:var(--color-muted);font-weight:700}
.s22-mail dd{margin:0;color:var(--color-ink)}
.s22-mail .body{white-space:pre-wrap;border-top:1px solid var(--color-line);padding-top:var(--s-2);line-height:1.55}
.s22-toast{position:fixed;right:var(--s-5);bottom:var(--s-5);z-index:60;max-width:22rem;margin:0;box-shadow:var(--shadow)}
.s22-toast[hidden]{display:none}

/* record */
.s22-hdr-act{display:flex;gap:var(--s-2);flex-wrap:wrap}
.s22-pf{display:flex;align-items:center;gap:var(--s-3);padding:.55rem var(--s-4);border-bottom:1px solid var(--color-line);min-height:2.4rem}
.s22-pf:last-child{border-bottom:none}
.s22-pf .k{flex:0 0 9rem;font-size:var(--t-xs);font-weight:800;color:var(--color-muted)}
.s22-pf .v{flex:1;min-width:0;font-size:var(--t-sm);color:var(--color-ink);overflow-wrap:anywhere}
.s22-pf .v.is-empty{color:var(--color-muted)}
.s22-pf .ed{all:unset;cursor:pointer;font-size:var(--t-xs);font-weight:800;color:var(--color-accent-text);padding:2px 8px;border-radius:var(--radius-sm)}
.s22-pf .ed:hover{background:var(--color-accent-wash)}
.s22-pf .ed:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.s22-pf form{display:flex;gap:.4rem;flex:1;align-items:center;flex-wrap:wrap}
.s22-pf form .s22-in{flex:1;min-width:10rem;padding:.35rem var(--s-3)}
.s22-role{display:flex;gap:var(--s-3);padding:var(--s-3) var(--s-4);flex-wrap:wrap}
.s22-sw{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;position:relative;font-size:var(--t-sm);font-weight:700;color:var(--color-ink)}
.s22-sw input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.s22-track{width:38px;height:22px;border-radius:999px;background:var(--color-line);position:relative;transition:.15s;flex:0 0 auto}
.s22-track::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--color-card);transition:.15s;box-shadow:var(--shadow)}
.s22-sw input:checked + .s22-track{background:var(--color-accent)}
.s22-sw input:checked + .s22-track::after{left:19px}
.s22-sw input:focus-visible + .s22-track{box-shadow:0 0 0 3px var(--color-accent-wash),0 0 0 5px var(--color-accent)}
.s22-ev{display:flex;align-items:center;gap:var(--s-3);padding:.6rem var(--s-4);border-bottom:1px solid var(--color-line);flex-wrap:wrap}
.s22-ev:last-child{border-bottom:none}
.s22-ev .t{flex:1;min-width:10rem}
.s22-ev .t b{display:block;color:var(--color-ink);font-size:var(--t-sm)}
.s22-ev .t span{font-size:var(--t-xs);color:var(--color-muted)}
.s22-ev .t b a{color:var(--color-ink);text-decoration:none}
.s22-ev .t b a:hover{color:var(--color-accent-text);text-decoration:underline}
.s22-add{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:.4rem;width:100%;padding:.5rem var(--s-4);font-size:var(--t-sm);color:var(--color-muted);cursor:pointer;border-top:1px solid var(--color-line)}
.s22-add:hover{color:var(--color-accent-text);background:var(--color-accent-wash)}
.s22-add:focus-visible{outline:3px solid var(--color-accent);outline-offset:-3px}
.s22-add .p{font-weight:800}
.s22-addform{padding:var(--s-3) var(--s-4);border-top:1px solid var(--color-line);background:var(--color-bg)}
.s22-addform[hidden]{display:none}
.s22-note{background:var(--color-bg);border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:var(--s-3);margin-bottom:var(--s-3);font-size:var(--t-sm);line-height:1.5}
.s22-note small{display:block;color:var(--color-muted);font-size:var(--t-xs);margin-top:.25rem}
.s22-notes{padding:var(--s-4) var(--s-4) var(--s-2)}
.s22-notfound{padding:var(--s-8) var(--s-5);text-align:center}
.s22-hd{display:flex;gap:var(--s-3);align-items:flex-start;flex-wrap:wrap}
.s22-live li{margin:.25rem 0}
@media(max-width:600px){.s22-pf .k{flex-basis:6rem}.s22-table th,.s22-table td{padding:var(--s-2) var(--s-3)}}

.s22-dlg{margin:auto}