/* staff-badges.css -- session 428 (briefs/session-428-brief.md; mh-badges-mockups-v1). Badges move into Staff: the Badges view (#staff/badges,
   board 1), her Badges card on her Staff page (board 2) and Award a badge (board 3), drawn by staff-badges.js. The boards' own stylesheet, value
   for value: the title row and the band are the shared core header's (core-header.css, CHD), so only what is new is here.
     .sbd-  the Badges view's cards: Recent awards, the catalog, Worth a look's close-to-a-badge list
     .sba-  Award a badge (one panel, two doors: inside her header, or over the Badges view with Which cleaner first)
     .sbc-  her Badges card on her Overview, and the header's badge count pill and Award a badge button
   Not on the boards (named here): the yellow New tag and the yellow ring around her Badges card are Daniel's highlights, not shipped. */

.sbd-card,.sba-panel,.sba-over,.sbc-card,.sbc-pill,.sbc-award{--sb-ink:#16181A;--sb-text:#3A4146;--sb-sub:#5F676E;--sb-muted:#6B747B;--sb-teal:#144D54;--sb-teal-2:#1D6E77;
  --sb-teal-50:#DCEFF0;--sb-amber-50:#FDF0D8;--sb-amber:#7A5312;--sb-green-50:#E2F4EE;--sb-green:#08513F;--sb-orange-50:#FFE8D6;--sb-orange:#9A4A0E;--sb-surface:#F4F6F7;
  --sb-line:#E6E9EC;--sb-th:#E9ECEE;--sb-border:#D2D8DD;--sb-choice:#DFE3E6;--sb-yellow:#FFD13A;--sb-yellow-2:#F5C21C;--sb-ring:#6FD5D4;--sb-night:#0E363B}

/* ---------- the Badges view (board 1): its cards ---------- */
.sbd-card{margin-top:16px;background:#ffffff;border-radius:14px;padding:16px 18px 18px;box-shadow:0 4px 14px 0 rgba(14,54,59,.08);min-width:0}
.sbd-ch{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.sbd-isq{width:40px;height:40px;border-radius:10px;background:var(--sb-teal);color:#ffffff;display:flex;align-items:center;justify-content:center;flex:none}
.sbd-isq svg{width:18px;height:18px}
.sbd-ch h2.sbd-h{margin:0;font-size:20px;line-height:1.25;font-weight:700;letter-spacing:-.02em;color:var(--sb-ink)}
.sbd-sub{font-size:12.5px;color:var(--sb-sub)}
.sbd-rt{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sbd-fr{display:flex;align-items:center;gap:10px;min-height:40px;flex-wrap:wrap}
.sbd-fr+.sbd-fr{margin-top:12px}
.sbd-ml{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sbd-ddw{position:relative}
.sbd-menu{position:absolute;right:0;top:44px;z-index:30;min-width:220px;max-height:340px;overflow:auto;background:#ffffff;border:1px solid var(--sb-border);border-radius:10px;
  box-shadow:0 12px 30px rgba(14,54,59,.16);padding:6px}
.sbd-mo{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;border-radius:7px;padding:8px 10px;font-size:14px;color:var(--sb-text);cursor:pointer;font-family:inherit}
.sbd-mo:hover,.sbd-mo:focus-visible{background:var(--sb-surface);outline:none}
.sbd-mo[aria-pressed="true"]{font-weight:650;color:var(--sb-ink)}
.sbd-mo .sbd-moi{width:20px;text-align:center;flex:none}
.sbd-ct{font-size:13px;font-weight:600;color:#5C646B;white-space:nowrap}
.sbd-tbx{overflow-x:auto;margin-top:14px}
.sbd-tbl{width:100%;border-collapse:separate;border-spacing:0;min-width:1000px;table-layout:auto}
.sbd-tbl th{text-align:left;font-size:12.5px;font-weight:600;color:#4D545A;background:var(--sb-th);padding:10px 12px;white-space:nowrap;
  text-transform:none;letter-spacing:normal;position:static;box-shadow:none;cursor:default;user-select:auto}   /* tokens.css th: sticky, uppercase, a teal rule */
.sbd-tbl th:first-child{border-radius:8px 0 0 8px}
.sbd-tbl th:last-child{border-radius:0 8px 8px 0}
.sbd-tbl td{padding:12px;font-size:14px;color:var(--sb-text);border-bottom:1px solid var(--sb-line);vertical-align:middle;white-space:normal;overflow:visible;text-overflow:clip;max-width:none}   /* tokens.css td: one line, cut with dots */
.sbd-tbl tbody tr:hover td{background:var(--sb-surface)}
.sbd-tbl td.sbd-nw{white-space:nowrap}
a.sbd-nm{font-weight:650;color:#15191C;font-size:14.5px;text-decoration:none}
a.sbd-nm:hover{text-decoration:underline}
a.sbd-nm:focus-visible{outline:2px solid var(--sb-teal-2);outline-offset:2px;border-radius:3px}
.sbd-sb{font-size:12.5px;color:var(--sb-sub);margin-top:2px}
.sbd-tbl td.sbd-why{color:var(--sb-ink);font-weight:500;min-width:280px;width:40%}
.sbd-tbl td.sbd-why.sbd-grey{color:var(--sb-muted);font-weight:450}
.sbd-bdg{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-weight:650;color:var(--sb-ink)}
.sbd-bq{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none;font-size:16px;line-height:1}
.sbd-bq.sbd-of{background:var(--sb-amber-50);color:var(--sb-amber)}
.sbd-bq.sbd-au{background:var(--sb-teal-50);color:var(--sb-teal)}
.sbd-pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:650;white-space:nowrap}
.sbd-pill.sbd-of{background:var(--sb-amber-50);color:var(--sb-amber)}
.sbd-pill.sbd-au{background:var(--sb-teal-50);color:var(--sb-teal)}
.sbd-pill.sbd-g{background:var(--sb-green-50);color:var(--sb-green)}
.sbd-pill.sbd-o{background:var(--sb-orange-50);color:var(--sb-orange)}
.sbd-pill.sbd-n{background:var(--sb-surface);color:var(--sb-muted)}
.sbd-empty{padding:22px 12px;color:var(--sb-sub);font-size:14px}
.sbd-more{margin-top:14px;display:flex;justify-content:center}
.sbd-btn{height:40px;padding:0 16px;border-radius:9px;border:1px solid var(--sb-border);background:#ffffff;font-family:inherit;font-size:14px;font-weight:600;color:#1E2428;display:inline-flex;
  align-items:center;gap:8px;cursor:pointer;white-space:nowrap;text-decoration:none}
.sbd-btn:hover{border-color:#AEB7BE;background:#F7F8F9}
.sbd-btn:focus-visible{outline:2px solid var(--sb-teal-2);outline-offset:2px}
.sbd-btn svg{width:16px;height:16px}
.sbd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.sbd-cat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sbd-cat+.sbd-more,.sbd-cat+.sbd-cat{margin-top:12px}
.sbd-ci{border-radius:12px;background:var(--sb-surface);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;min-width:0}
.sbd-ci .sbd-bq{width:40px;height:40px;border-radius:10px;font-size:20px}
.sbd-ct2{font-size:15px;font-weight:700;color:var(--sb-ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sbd-cr{font-size:13px;color:#4D545A;margin-top:4px}
.sbd-cc{font-size:12px;color:var(--sb-sub);margin-top:6px}
.sbd-near{margin-top:16px;background:#ffffff;border-radius:14px;padding:14px 18px;box-shadow:0 4px 14px 0 rgba(14,54,59,.08)}
.sbd-near h3{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--sb-ink)}
.sbd-nr{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--sb-line);flex-wrap:wrap;font-size:14px}
.sbd-nr:first-of-type{border-top:0}
.sbd-nbar{flex:1 1 160px;min-width:120px;max-width:320px;height:8px;border-radius:99px;background:var(--sb-th);overflow:hidden}
.sbd-nbar i{display:block;height:100%;border-radius:99px;background:var(--sb-teal-2)}
.sbd-err{color:#A1260D;font-size:14px;padding:12px 0}
@media (max-width:1100px){.sbd-cat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.sbd-cat{grid-template-columns:1fr}.sbd-ml{margin-left:0}}

/* ---------- Award a badge (board 3) ---------- */
.sba-panel{margin-top:22px;background:#ffffff;border-radius:14px;color:#4D545A;padding:22px 24px;font-size:14px;line-height:1.45;text-align:left}
.sba-ph{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.sba-isq{width:40px;height:40px;border-radius:10px;background:#FFF5CC;color:var(--sb-amber);display:flex;align-items:center;justify-content:center;flex:none}
.sba-ph h2.sba-h{margin:0;font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--sb-ink)}
.sba-x{margin-left:auto}
.sba-step{font-size:13px;font-weight:700;color:var(--sb-ink);margin:0 0 10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sba-step+.sba-choices,.sba-step+.sba-who{margin-top:0}
.sba-req{font-size:11.5px;font-weight:650;color:var(--sb-amber);background:var(--sb-amber-50);border-radius:999px;padding:1px 8px}
.sba-hint{font-weight:450;color:var(--sb-muted)}
.sba-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sba-choice{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:14px 16px;border-radius:12px;border:2px solid var(--sb-choice);background:#ffffff;font-family:inherit;cursor:pointer;min-width:0;color:inherit}
.sba-choice:hover{border-color:var(--sb-ring)}
.sba-choice:focus-visible{outline:2px solid var(--sb-teal-2);outline-offset:2px}
.sba-choice.sba-on{border-color:var(--sb-teal);background:var(--sb-teal-50)}
.sba-bq{width:40px;height:40px;border-radius:10px;background:var(--sb-amber-50);color:var(--sb-amber);display:flex;align-items:center;justify-content:center;flex:none;font-size:20px;line-height:1}
.sba-ct{display:block;font-size:15px;font-weight:700;color:var(--sb-ink)}
.sba-cr{display:block;font-size:12.5px;color:#4D545A;margin-top:2px}
.sba-cc{display:block;font-size:11.5px;color:var(--sb-muted);margin-top:4px}
.sba-note{font-size:12px;color:var(--sb-muted);margin-top:8px}
.sba-two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px;margin-top:22px}
textarea.sba-why,.sba-why{width:100%;height:104px;min-height:104px;border-radius:10px;border:1.5px solid var(--sb-border);padding:12px 14px;font-family:inherit;font-size:15px;font-weight:500;
  color:var(--sb-ink);resize:vertical;outline:none;box-sizing:border-box;line-height:1.45;background:#ffffff}
textarea.sba-why:focus,.sba-why:focus{border-color:var(--sb-ring);box-shadow:0 0 0 3px #6fd5d466}
textarea.sba-why.sba-bad{border-color:#C2410C}
.sba-cnt{font-size:11.5px;color:var(--sb-muted);margin-top:6px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sba-cnt .sba-bad{color:#A1260D;font-weight:650}
.sba-chk{margin-top:18px;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:var(--sb-surface)}
input.sba-cb,.sba-cb{width:20px;height:20px;margin:2px 0 0;accent-color:var(--sb-teal);flex:none}
.sba-chk label{font-size:14.5px;font-weight:650;color:var(--sb-ink);cursor:pointer}
.sba-chkw{flex:1;min-width:0}
.sba-s{font-size:12.5px;color:#4D545A;margin-top:3px}
.sba-sms{margin-top:10px;background:#ffffff;border:1px solid var(--sb-choice);border-radius:12px;padding:10px 12px;font-size:13.5px;color:var(--sb-ink);white-space:pre-line;overflow-wrap:anywhere}
textarea.sba-smsed,.sba-smsed{margin-top:10px;width:100%;height:120px;border-radius:12px;border:1.5px solid var(--sb-border);padding:10px 12px;font-family:inherit;font-size:13.5px;color:var(--sb-ink);
  resize:vertical;box-sizing:border-box;line-height:1.45;background:#ffffff}
textarea.sba-smsed:focus{border-color:var(--sb-ring);box-shadow:0 0 0 3px #6fd5d466;outline:none}
.sba-off{opacity:.55}
.sba-link{border:0;background:none;padding:0;font-family:inherit;font-size:12.5px;font-weight:650;color:var(--sb-teal-2);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.sba-link:hover{color:var(--sb-teal)}
.sba-link:focus-visible{outline:2px solid var(--sb-teal-2);outline-offset:2px;border-radius:3px}
.sba-prev{background:var(--sb-night);border-radius:18px;padding:18px;color:#ffffff;display:flex;flex-direction:column;gap:12px;min-width:0}
.sba-lb{font-size:12px;font-weight:600;color:var(--sb-ring)}
.sba-app{background:#ffffff;border-radius:14px;padding:18px;color:var(--sb-ink);display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.sba-big{width:64px;height:64px;border-radius:50%;background:var(--sb-yellow);color:var(--sb-ink);display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1}
.sba-ah{font-size:13px;font-weight:600;color:var(--sb-muted)}
.sba-an{font-size:22px;font-weight:800;letter-spacing:-.02em}
.sba-aw{font-size:14.5px;font-weight:500;color:var(--sb-ink);overflow-wrap:anywhere}
.sba-aw.sba-ph2{color:var(--sb-muted);font-weight:450}
.sba-af{font-size:12px;color:var(--sb-muted)}
.sba-fn{font-size:12px;color:#ffffffcc}
.sba-fn .sba-link{color:#ffffff;font-size:12px}
.sba-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--sb-choice)}
.sba-btn-y{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:10px;border:0;background:linear-gradient(180deg,#ffd13a,#f5c21c);color:var(--sb-ink);
  font-family:inherit;font-weight:750;font-size:14.5px;box-shadow:0 6px 16px 0 rgba(217,106,24,.28);cursor:pointer;white-space:nowrap}
.sba-btn-y:hover{filter:brightness(1.03);box-shadow:0 8px 20px 0 rgba(217,106,24,.34)}
.sba-btn-y:focus-visible{outline:2px solid var(--sb-teal);outline-offset:2px}
.sba-btn-y[disabled]{opacity:.6;cursor:default}
.sba-btn{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 16px;border-radius:10px;border:1.5px solid #C9D0D4;background:#ffffff;color:var(--sb-ink);font-family:inherit;
  font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap}
.sba-btn:hover{background:var(--sb-th)}
.sba-btn:focus-visible{outline:2px solid var(--sb-teal-2);outline-offset:2px}
.sba-btn.sba-sm{height:36px}
.sba-foot{font-size:12px;color:var(--sb-muted)}
.sba-msg{font-size:13.5px;margin-top:10px;color:#A1260D;font-weight:600}
.sba-msg:empty{display:none}
/* Which cleaner (from the Badges view) */
.sba-who{position:relative;margin-bottom:18px}
input.sba-q,.sba-q{width:100%;height:44px;border-radius:10px;border:1.5px solid var(--sb-border);padding:0 14px;font-family:inherit;font-size:15px;color:var(--sb-ink);box-sizing:border-box;background:#ffffff}
input.sba-q:focus{border-color:var(--sb-ring);box-shadow:0 0 0 3px #6fd5d466;outline:none}
.sba-list{margin-top:8px;max-height:280px;overflow:auto;border:1px solid var(--sb-choice);border-radius:12px}
.sba-pick{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-top:1px solid var(--sb-line);background:#ffffff;padding:10px 14px;font-family:inherit;font-size:14px;color:var(--sb-text);cursor:pointer}
.sba-pick:first-child{border-top:0}
.sba-pick:hover,.sba-pick:focus-visible{background:var(--sb-surface);outline:none}
.sba-pick b{color:var(--sb-ink);font-weight:650}
.sba-pick .sba-pw{margin-left:auto;font-size:12.5px;color:var(--sb-sub);white-space:nowrap}
.sba-new{font-size:11.5px;font-weight:650;color:var(--sb-amber);background:var(--sb-amber-50);border-radius:999px;padding:1px 8px;white-space:nowrap}
.sba-chosen{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;color:var(--sb-ink);font-weight:650}
/* over the Badges view: the same panel in a box fixed over the page */
.sba-over{position:fixed;inset:0;z-index:900;background:rgba(11,28,32,.55);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:40px 16px}
.sba-over .sba-panel{margin-top:0;width:100%;max-width:1120px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
@media (max-width:1100px){.sba-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){.sba-two{grid-template-columns:1fr}}
@media (max-width:700px){.sba-choices{grid-template-columns:1fr}.sba-panel{padding:18px 16px}.sba-over{padding:12px 8px}}

/* ---------- her Staff page (board 2) ---------- */
.sbc-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;background:#FFF5CC;color:var(--sb-amber);font-size:12.5px;font-weight:600;white-space:nowrap}
.sbc-award{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:10px;border:1.5px solid var(--sb-yellow);background:transparent;color:var(--sb-yellow);
  font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap}
.sbc-award:hover{background:#ffd13a1f}
.sbc-award:focus-visible{outline:2px solid #ffffff;outline-offset:2px}
.sbc-award svg{width:16px;height:16px}
.sbc-card{background:#ffffff;border-radius:14px;box-shadow:0 4px 14px 0 rgba(14,54,59,.08);padding:20px 22px;min-width:0}
.sbc-sh{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sbc-isq{width:40px;height:40px;border-radius:10px;background:var(--sb-teal);color:#ffffff;display:flex;align-items:center;justify-content:center;flex:none}
.sbc-sh h2.sbc-h{margin:0;font-size:clamp(18px,1.8vw,21px);font-weight:700;letter-spacing:-.02em;color:var(--sb-ink)}
.sbc-cnt{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--sb-th);color:var(--sb-ink);font-size:12.5px;font-weight:800}
.sbc-right{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
a.sbc-lnk{font-size:13px;font-weight:650;color:var(--sb-teal-2);text-decoration:none}
a.sbc-lnk:hover{text-decoration:underline}
a.sbc-lnk:focus-visible{outline:2px solid var(--sb-teal-2);outline-offset:2px;border-radius:3px}
.sbc-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:10px;border:1.5px solid #C9D0D4;background:#ffffff;color:var(--sb-ink);font-family:inherit;font-weight:700;
  font-size:13px;cursor:pointer;white-space:nowrap}
.sbc-btn:hover{background:var(--sb-th)}
.sbc-btn:focus-visible{outline:2px solid var(--sb-teal-2);outline-offset:2px}
.sbc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sbc-t{border-radius:12px;background:var(--sb-surface);padding:16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.sbc-tp{display:flex;align-items:center;gap:10px}
.sbc-bq{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;font-size:20px;line-height:1}
.sbc-bq.sbc-of{background:var(--sb-amber-50);color:var(--sb-amber)}
.sbc-bq.sbc-au{background:var(--sb-teal-50);color:var(--sb-teal)}
.sbc-nm{font-size:15.5px;font-weight:750;color:var(--sb-ink);letter-spacing:-.01em}
.sbc-dt{font-size:12.5px;color:var(--sb-muted)}
.sbc-why{font-size:14px;color:var(--sb-ink);font-weight:500;overflow-wrap:anywhere}
.sbc-why.sbc-grey{color:var(--sb-muted);font-weight:450}
.sbc-by{font-size:12px;color:var(--sb-muted)}
.sbc-pl{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:650;white-space:nowrap;margin-right:4px}
.sbc-pl.sbc-of{background:var(--sb-amber-50);color:var(--sb-amber)}
.sbc-pl.sbc-au{background:var(--sb-teal-50);color:var(--sb-teal)}
.sbc-all{margin-top:12px}
.sbc-near{margin-top:14px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--sb-choice)}
.sbc-nt{font-size:14px;font-weight:650;color:var(--sb-ink)}
.sbc-ns{font-size:12.5px;color:var(--sb-muted)}
.sbc-bar{height:8px;border-radius:99px;background:var(--sb-th);overflow:hidden;flex:1 1 220px;min-width:160px}
.sbc-bar i{display:block;height:100%;border-radius:99px;background:var(--sb-teal-2)}
.sbc-shout{margin-left:auto}
.sbc-empty{font-size:14px;color:var(--sb-sub);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
@media (max-width:1000px){.sbc-grid{grid-template-columns:1fr}.sbc-shout{margin-left:0}}