/* ============================================================
   USEF UI COMPONENTS v1.0 — 2026-07-22
   Every class reads ONLY theme variables from usef-tokens.css,
   so each component works on .usef-public and .usef-app
   (light + dark) without any per-page styling.
   Replaces: 67 button defs / 9 modal systems / ~20 form styles.
   ============================================================ */

/* ---------- type ---------- */
.u-h1{font-family:var(--font-display); font-weight:var(--display-weight);
      font-size:var(--fs-h1); line-height:1.15; letter-spacing:-.01em;
      margin:0 0 var(--sp-3); text-wrap:balance;}
.u-h2{font-family:var(--font-display); font-weight:var(--display-weight);
      font-size:var(--fs-h2); line-height:1.2; letter-spacing:-.01em; margin:0 0 var(--sp-4);}
.u-h3{font-size:var(--fs-h3); font-weight:800; margin:0 0 var(--sp-2);}
.u-body{font-size:var(--fs-body); line-height:1.55; margin:0;}
.u-muted{color:var(--muted);}
.u-small{font-size:var(--fs-small);}
.u-eyebrow{font-size:var(--fs-tiny); font-weight:700; letter-spacing:.14em;
           text-transform:uppercase; color:var(--muted);}
.u-num{font-variant-numeric:tabular-nums;}

/* ---------- layout utilities ---------- */
.u-center-row{display:flex; gap:var(--sp-3); justify-content:center; align-items:center; flex-wrap:wrap;}
.u-row{display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap;}
.u-stack{display:flex; flex-direction:column; gap:var(--sp-3);}
.u-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--sp-4);}
.u-scroll-x{overflow-x:auto;}

/* ---------- buttons ---------- */
.u-btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
       border-radius:var(--r-btn); border:1.5px solid transparent; cursor:pointer;
       font-family:var(--font-sans); font-weight:700; font-size:var(--fs-small);
       padding:10px 20px; line-height:1; white-space:nowrap; min-height:38px;
       text-decoration:none; color:var(--ink); background:transparent;
       transition:filter .12s, background .12s;}
.u-btn:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.u-btn:disabled{opacity:.45; cursor:not-allowed;}
.u-btn--primary{background:var(--primary); color:var(--primary-ink);}
.u-btn--primary:hover:not(:disabled){filter:brightness(1.08);}
.u-btn--accent{background:var(--accent); color:var(--accent-ink);}   /* Donate / hero CTA */
.u-btn--accent:hover:not(:disabled){filter:brightness(1.08);}
.u-btn--outline{border-color:var(--outline); color:var(--outline);}
.u-btn--ghost{color:var(--outline);}
.u-btn--danger{border-color:var(--usef-danger-600); color:var(--danger);}
.u-btn--sm{padding:8px 14px; font-size:12.5px; min-height:32px;}
.u-btn--lg{padding:0 26px; min-height:48px; font-size:14.5px;}   /* hero / phone-first */
/* on a deep band (navy footer, banner) */
.u-on-deep .u-btn--outline{border-color:var(--deep-ink); color:var(--deep-ink);}
.u-on-deep .u-btn--ghost{color:var(--deep-ink);}
.u-on-deep .u-eyebrow{color:var(--deep-ink);}
.u-iconbtn{width:34px; height:34px; border-radius:50%; border:1px solid var(--border);
           background:var(--surface); color:var(--muted); display:inline-grid; place-items:center;
           cursor:pointer; font-size:13px; flex:none;}
.u-iconbtn:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

/* ---------- cards & tiles ---------- */
.u-card{background:var(--surface); border:1px solid var(--border);
        border-radius:var(--r-card); padding:var(--sp-5); box-shadow:var(--shadow);}
.u-card--flat{box-shadow:none;}
.u-icon-tile{width:42px; height:42px; border-radius:calc(var(--r-card) - 4px);
             background:var(--tint); display:grid; place-items:center; font-size:20px; flex:none;}
.u-tile{display:flex; align-items:center; gap:var(--sp-3); background:var(--surface);
        border:1px solid var(--border); border-radius:var(--r-card);
        padding:var(--sp-3) var(--sp-4); box-shadow:var(--shadow); cursor:pointer; text-align:left;}
.u-tile .u-icon-tile{width:36px; height:36px; font-size:17px;}
.u-tile b{display:block; font-size:13.5px;}
.u-tile span{font-size:12px; color:var(--muted);}
.u-tile .u-chev{margin-left:auto; color:var(--muted);}
.u-band{background:var(--deep); color:var(--deep-ink); border-radius:var(--r-card);
        padding:var(--sp-6); text-align:center;}

/* ---------- stats & meters ---------- */
.u-stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
        padding:var(--sp-3) var(--sp-2); box-shadow:var(--shadow); text-align:center;}
.u-stat b{display:block; font-family:var(--font-display); font-weight:var(--display-weight);
          font-size:21px; font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.u-stat span{font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);}
.u-meter{height:8px; border-radius:999px; background:var(--tint); overflow:hidden;}
.u-meter i{display:block; height:100%; border-radius:999px; background:var(--primary);}
.u-meter.is-ok i{background:var(--ok);}
.u-meter.is-warn i{background:var(--gold);}
.u-meter.is-late i{background:var(--usef-danger-600);}

/* ---------- THE popup (one modal to replace all 9) ---------- */
.u-overlay{position:fixed; inset:0; background:var(--scrim); z-index:1000;
           display:grid; place-items:center; padding:var(--sp-4);}
.u-modal{background:var(--surface); color:var(--ink); border-radius:var(--r-card);
         width:min(440px,100%); max-height:min(86vh,720px); display:flex; flex-direction:column;
         box-shadow:var(--shadow-pop);}
.u-modal-h{display:flex; align-items:flex-start; gap:var(--sp-3);
           padding:var(--sp-5) var(--sp-5) 0;}
.u-modal-h h4{font-family:var(--font-display); font-weight:var(--display-weight);
              font-size:17.5px; margin:0; flex:1;}
.u-modal-sub{font-size:12.5px; color:var(--muted); margin:2px 0 0;}
.u-modal-b{padding:var(--sp-4) var(--sp-5); overflow-y:auto;}
.u-modal-f{padding:0 var(--sp-5) var(--sp-5);
           display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap;} /* centered = house rule */
@media (max-width:560px){
  .u-overlay{padding:0; align-items:end;}
  .u-modal--sheet{width:100%; max-height:94vh; border-radius:var(--r-card) var(--r-card) 0 0;}
}

/* ---------- forms (one field style for the whole site) ---------- */
.u-field{display:block; margin-bottom:var(--sp-4);}
.u-field > label{display:block; font-size:11.5px; font-weight:700; letter-spacing:.04em;
                 margin-bottom:6px; color:var(--ink);}
.u-input,.u-select,.u-textarea{width:100%; box-sizing:border-box; font-family:var(--font-sans);
        font-size:14px; padding:10px 12px; border-radius:var(--r-field);
        border:1.5px solid var(--border); background:var(--surface); color:var(--ink);}
.u-textarea{min-height:96px; resize:vertical;}
.u-input:focus-visible,.u-select:focus-visible,.u-textarea:focus-visible{
        outline:none; border-color:var(--focus);
        box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent);}
.u-help{font-size:12px; color:var(--muted); margin-top:5px;}
.u-field.is-invalid .u-input,.u-field.is-invalid .u-select,.u-field.is-invalid .u-textarea{
        border-color:var(--usef-danger-600);}
.u-error{font-size:12px; color:var(--danger); font-weight:600; margin-top:5px;}
.u-check{display:flex; gap:10px; align-items:flex-start; font-size:14px; cursor:pointer;}
.u-check input{width:18px; height:18px; margin:1px 0 0; accent-color:var(--primary); flex:none;}
.u-switch{position:relative; width:40px; height:23px; border-radius:999px; background:var(--border);
          border:0; cursor:pointer; flex:none; transition:background .15s;}
.u-switch::after{content:""; position:absolute; top:2.5px; left:2.5px; width:18px; height:18px;
          border-radius:50%; background:#fff; transition:left .15s; box-shadow:0 1px 2px rgba(0,0,0,.25);}
.u-switch[aria-checked="true"]{background:var(--primary);}
.u-switch[aria-checked="true"]::after{left:19.5px;}
.u-switch:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

/* ---------- badges · pills · chips ---------- */
.u-badge{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.05em;
         padding:4px 11px; border-radius:999px;}
.u-badge--ok{background:var(--ok-bg); color:var(--ok);}
.u-badge--warn{background:var(--warn-bg); color:var(--warn);}
.u-badge--danger{background:var(--danger-bg); color:var(--danger);}
.u-badge--neutral{background:var(--tint); color:var(--secondary);}
.u-badge--gold{background:var(--gold); color:#3A3220;}
.u-pill{display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.08em;
        text-transform:uppercase; padding:4px 10px; border-radius:999px;
        background:var(--tint); color:var(--secondary);}
.u-chip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;
        padding:7px 14px; border-radius:999px; border:1.5px solid var(--border);
        background:var(--surface); color:var(--muted); cursor:pointer;}
.u-chip.is-on{background:var(--primary); border-color:var(--primary); color:var(--primary-ink);}
.u-chip:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

/* ---------- tabs / segmented ---------- */
.u-tabs{display:inline-flex; gap:4px; padding:4px; background:var(--tint);
        border-radius:calc(var(--r-btn) + 2px); max-width:100%; overflow-x:auto;}
.u-tab{border:0; cursor:pointer; font-family:var(--font-sans); font-size:12.5px; font-weight:700;
       padding:8px 16px; border-radius:var(--r-btn); background:transparent; color:var(--muted);
       white-space:nowrap;}
.u-tab.is-active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow);}
.u-tab:focus-visible{outline:2px solid var(--focus); outline-offset:1px;}

/* ---------- lists & tables ---------- */
.u-listrow{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4);
           background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);}
.u-listrow + .u-listrow{margin-top:var(--sp-2);}
.u-table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-card);
              background:var(--surface);}
.u-table{width:100%; border-collapse:collapse; font-size:var(--fs-small); min-width:520px;}
.u-table th{text-align:left; font-size:var(--fs-tiny); text-transform:uppercase; letter-spacing:.08em;
            color:var(--muted); padding:12px 14px; border-bottom:1px solid var(--border);}
.u-table td{padding:12px 14px; border-bottom:1px solid var(--border);}
.u-table tr:last-child td{border-bottom:0;}
.u-table td.u-num{text-align:right;}

/* ---------- feedback ---------- */
.u-banner{display:flex; gap:10px; align-items:flex-start; padding:var(--sp-3) var(--sp-4);
          border-radius:var(--r-card); font-size:var(--fs-small); font-weight:600;
          border:1px solid var(--border); background:var(--surface);}
.u-banner--ok{background:var(--ok-bg); color:var(--ok); border-color:transparent;}
.u-banner--warn{background:var(--warn-bg); color:var(--warn); border-color:transparent;}
.u-banner--danger{background:var(--danger-bg); color:var(--danger); border-color:transparent;}
.u-toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
         background:var(--ink); color:var(--bg); font-size:var(--fs-small); font-weight:700;
         padding:12px 20px; border-radius:999px; box-shadow:var(--shadow-pop); z-index:1100;}
.u-empty{text-align:center; padding:var(--sp-7) var(--sp-4); color:var(--muted);}
.u-empty .u-empty-emoji{font-size:34px; display:block; margin-bottom:var(--sp-2);}
.u-skel{border-radius:var(--r-field); background:var(--tint); position:relative; overflow:hidden; min-height:14px;}
.u-skel::after{content:""; position:absolute; inset:0;
        background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
        animation:uskel 1.2s infinite;}
@keyframes uskel{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.u-skel::after{animation:none}}

/* ---------- tooltips (admin rule: obvious help everywhere) ---------- */
.u-tip{position:relative; display:inline-grid; place-items:center; width:18px; height:18px;
       border-radius:50%; background:var(--tint); color:var(--secondary); font-size:11px;
       font-weight:800; cursor:help;}
.u-tip:hover::after,.u-tip:focus-visible::after{content:attr(data-tip); position:absolute;
       bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
       background:var(--ink); color:var(--bg); font-size:12px; font-weight:600; line-height:1.4;
       padding:8px 12px; border-radius:8px; width:max-content; max-width:240px;
       text-align:center; z-index:50; white-space:normal;}

/* ---------- navigation ---------- */
.u-topbar{display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-3) var(--sp-5);
          background:var(--surface); border-bottom:1px solid var(--border);}
.u-logo{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink);}
.u-logo-mark{width:34px; height:34px; border-radius:8px; background:var(--primary);
             color:var(--primary-ink); display:grid; place-items:center;
             font-family:var(--font-display); font-weight:700; font-size:17px; flex:none;}
.u-logo-word{font-weight:800; font-size:16px; line-height:1.05;}
.u-logo-word small{display:block; font-weight:600; font-size:9.5px; letter-spacing:.12em;
                   text-transform:uppercase; color:var(--muted);}
.u-navlinks{display:flex; gap:18px; margin:0 auto; font-size:13.5px; font-weight:600; color:var(--muted);}
.u-navlinks a{color:inherit; text-decoration:none; padding:3px 0;}
.u-navlinks a.is-on{color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent);}
.u-sideitem{display:flex; align-items:center; gap:10px; padding:10px 14px;
            border-radius:calc(var(--r-card) - 4px); font-size:13.5px; font-weight:600;
            color:var(--muted); cursor:pointer; text-decoration:none;}
.u-sideitem.is-on{background:var(--tint); color:var(--ink);}
.u-bottomtabs{display:flex; background:var(--surface); border-top:1px solid var(--border);}
.u-bottomtab{flex:1; text-align:center; padding:8px 4px 10px; font-size:10px; font-weight:700;
             color:var(--muted); cursor:pointer;}
.u-bottomtab .bt-ico{display:block; font-size:19px; margin-bottom:2px;}
.u-bottomtab.is-on{color:var(--primary);}
.u-footerband{background:var(--deep); color:var(--deep-ink); padding:var(--sp-7) var(--sp-5) var(--sp-5);
              text-align:center;}

/* ============================================================
   APP-SPECIFIC PIECES — member home + staff workspace recipes
   ============================================================ */

/* ---------- staff app bar (desktop) ---------- */
.u-appbar{display:flex; align-items:center; gap:var(--sp-3); padding:10px var(--sp-4);
          background:var(--surface); border-bottom:1px solid var(--border);}
.u-appbar .u-searchbox{flex:1; max-width:340px; display:flex; align-items:center; gap:8px;
          background:var(--tint); border-radius:999px; padding:8px 14px;
          font-size:13px; color:var(--muted);}
.u-avatar{width:32px; height:32px; border-radius:50%; background:var(--tint); color:var(--secondary);
          display:inline-grid; place-items:center; font-size:12px; font-weight:800; flex:none;}

/* ---------- tool page header (every staff tool starts with this) ---------- */
.u-toolhead{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-4);}
.u-toolhead h2{font-family:var(--font-display); font-weight:var(--display-weight);
               font-size:19px; margin:0; flex:1; min-width:140px;}
.u-toolhead .u-toolsub{width:100%; font-size:12.5px; color:var(--muted); margin-top:-6px;}

/* ---------- density: staff screens wrap content in .u-compact ---------- */
.u-compact .u-card{padding:var(--sp-4);}
.u-compact .u-listrow{padding:9px 12px; border-radius:calc(var(--r-card) - 6px);}
.u-compact .u-tile{padding:9px 12px;}
.u-compact .u-stat{padding:9px 6px;}
.u-compact .u-stat b{font-size:18px;}

/* ---------- member "needs you" / staff announcement card ---------- */
.u-needcard{display:flex; gap:var(--sp-3); align-items:flex-start; background:var(--surface);
            border:1px solid var(--border); border-left:3px solid var(--secondary);
            border-radius:var(--r-card); padding:var(--sp-4); box-shadow:var(--shadow);}
.u-needcard .u-icon-tile{width:36px; height:36px; font-size:17px;}
.u-needcard b{display:block; font-size:14px;}
.u-needcard p{margin:2px 0 10px; font-size:12.5px; color:var(--muted);}
.u-needcard .u-dismiss{margin-left:auto; background:none; border:0; color:var(--muted);
            font-size:12px; cursor:pointer; flex:none;}

/* ---------- feed item (What's happening) ---------- */
.u-feeditem{display:flex; gap:var(--sp-3); align-items:center; padding:10px 0;
            border-bottom:1px solid var(--border);}
.u-feeditem:last-child{border-bottom:0;}
.u-feeditem .u-icon-tile{width:34px; height:34px; font-size:16px;}
.u-feeditem b{font-size:13.5px; display:block;}
.u-feeditem span{font-size:12px; color:var(--muted);}

/* ---------- kanban (CRM boards) ---------- */
.u-kanban{display:flex; gap:var(--sp-3); overflow-x:auto; padding-bottom:var(--sp-2);}
.u-kcol{flex:0 0 190px; background:var(--alt); border:1px solid var(--border);
        border-radius:var(--r-card); padding:10px;}
.u-kcol-h{display:flex; justify-content:space-between; align-items:center; font-size:11px;
          font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
          padding:2px 4px 10px;}
.u-kcard{background:var(--surface); border:1px solid var(--border);
         border-radius:calc(var(--r-card) - 6px); padding:10px 12px; margin-bottom:8px;
         box-shadow:var(--shadow); cursor:grab; font-size:13px;}
.u-kcard b{display:block; font-size:13px;}
.u-kcard .u-small{color:var(--muted);}

/* ---------- person row + approval diff ---------- */
.u-personrow{display:flex; align-items:center; gap:var(--sp-3); padding:10px 12px;
             background:var(--surface); border:1px solid var(--border);
             border-radius:var(--r-card); cursor:pointer;}
.u-personrow + .u-personrow{margin-top:var(--sp-2);}
.u-personrow b{display:block; font-size:13.5px;}
.u-personrow span{font-size:12px; color:var(--muted);}
.u-diff{border:1px solid var(--border); border-radius:var(--r-field); overflow:hidden;
        font-size:13px;}
.u-diff-row{display:flex; gap:10px; padding:9px 12px;}
.u-diff-row.is-old{background:var(--danger-bg); color:var(--danger); text-decoration:line-through;}
.u-diff-row.is-new{background:var(--ok-bg); color:var(--ok);}
.u-diff-row .u-diff-k{flex:0 0 70px; font-weight:800; font-size:11px; text-transform:uppercase;
        letter-spacing:.06em; padding-top:2px; text-decoration:none;}

/* ---------- chat ---------- */
.u-convo{display:flex; gap:10px; align-items:center; padding:9px 10px;
         border-radius:calc(var(--r-card) - 6px); cursor:pointer;}
.u-convo.is-on{background:var(--tint);}
.u-convo-name{font-weight:700; display:block; font-size:13px;}
.u-convo-prev{color:var(--muted); font-size:11.5px; white-space:nowrap; overflow:hidden;
              text-overflow:ellipsis; max-width:118px; display:block;}
.u-convo-meta{margin-left:auto; text-align:right; flex:none;}
.u-convo-time{font-size:10px; color:var(--muted); display:block; margin-bottom:2px;}
.u-count{display:inline-block; min-width:18px; height:18px; border-radius:999px;
         background:var(--accent); color:var(--accent-ink); font-size:10.5px; font-weight:800;
         line-height:18px; text-align:center; padding:0 5px;}
.u-avatar-wrap{position:relative; flex:none;}
.u-presence{position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%;
            background:#22A06B; border:2px solid var(--surface);}
.u-presence.is-off{background:var(--border);}
.u-daydiv,.u-newdiv{display:flex; align-items:center; gap:10px; margin:14px 0;
        font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;}
.u-daydiv{color:var(--muted);}
.u-daydiv::before,.u-daydiv::after,.u-newdiv::before,.u-newdiv::after{content:""; flex:1; height:1px;}
.u-daydiv::before,.u-daydiv::after{background:var(--border);}
.u-newdiv{color:var(--accent);}
.u-newdiv::before,.u-newdiv::after{background:var(--accent); opacity:.5;}
.u-msg{display:flex; gap:10px; padding:5px 0; align-items:flex-start;}
.u-msg.is-grouped{padding-left:42px;}
.u-msg-head{font-size:12px;}
.u-msg-head b{font-size:12.5px;}
.u-msg-head span{color:var(--muted); font-size:10.5px; margin-left:6px;}
.u-msg-text{font-size:13.5px; line-height:1.45; margin:1px 0 0;}
.u-react{display:inline-flex; gap:4px; align-items:center; font-size:11px; padding:2px 8px;
         border-radius:999px; background:var(--tint); border:1px solid var(--border); cursor:pointer;}
.u-react.is-mine{border-color:var(--secondary);}
.u-threadlink{font-size:12px; font-weight:700; color:var(--secondary); cursor:pointer;}
.u-composer{display:flex; gap:8px; align-items:center; padding:10px;
            border-top:1px solid var(--border); background:var(--surface);}
.u-composer input{flex:1; border:1.5px solid var(--border); border-radius:999px; padding:9px 14px;
            font-size:13.5px; background:var(--bg); color:var(--ink); min-width:0;}
.u-composer input:focus-visible{outline:none; border-color:var(--focus);}
.u-sendbtn{width:36px; height:36px; border-radius:50%; background:var(--primary);
           color:var(--primary-ink); border:0; display:grid; place-items:center;
           font-size:14px; cursor:pointer; flex:none;}

/* ---------- tool cards (All tools manager) ---------- */
.u-toolcard{position:relative; display:flex; gap:12px; align-items:flex-start;
            background:var(--surface); border:1px solid var(--border);
            border-radius:var(--r-card); padding:14px; padding-right:34px;
            box-shadow:var(--shadow); cursor:pointer;}
.u-toolcard b{font-size:13.5px; display:block;}
.u-toolcard p{margin:2px 0 8px; font-size:12px; color:var(--muted);}
.u-toolbadges{display:flex; gap:6px; flex-wrap:wrap;}
.u-pin{position:absolute; top:8px; right:8px; background:none; border:0; font-size:14px;
       cursor:pointer; color:var(--border);}
.u-pin.is-on{color:var(--gold);}
.u-toolcard.is-locked{opacity:.55; box-shadow:none;}
.u-grip{color:var(--border); font-size:13px; cursor:grab; flex:none; align-self:center;}

/* ---------- tasks ---------- */
.u-task{display:flex; gap:10px; align-items:center; padding:10px 12px;
        background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);}
.u-task + .u-task{margin-top:8px;}
.u-taskcheck{width:20px; height:20px; border-radius:50%; border:2px solid var(--border);
             background:var(--surface); cursor:pointer; flex:none; display:grid;
             place-items:center; font-size:11px; color:transparent;}
.u-task-title{font-size:13.5px; font-weight:600; flex:1; min-width:0;}
.u-task-meta{font-size:11px; color:var(--muted); flex:none;}
.u-task.is-done{opacity:.62;}
.u-task.is-done .u-task-title{text-decoration:line-through;}
.u-task.is-done .u-taskcheck{background:var(--ok); border-color:var(--ok); color:#fff;}
.u-sizechip{font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px;
            background:var(--tint); flex:none;}
.u-loadbar{display:flex; height:10px; border-radius:999px; overflow:hidden; background:var(--tint);}
.u-loadbar i{display:block; height:100%;}
.u-quickadd{display:flex; gap:8px; align-items:center; border:1.5px dashed var(--border);
            border-radius:var(--r-field); padding:11px 13px; color:var(--muted);
            font-size:13.5px; background:var(--surface); cursor:text;}
.u-needcard--danger{border-left-color:var(--usef-danger-600);}

/* ---------- wizard steps (member forms) ---------- */
.u-steps{display:flex; align-items:center; gap:6px; margin-bottom:var(--sp-4);}
.u-step{flex:1; height:5px; border-radius:999px; background:var(--tint);}
.u-step.is-done{background:var(--primary);}
.u-steps-label{font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.06em;
               text-transform:uppercase; margin-bottom:var(--sp-2);}
.u-success{text-align:center; padding:var(--sp-7) var(--sp-4);}
.u-success .u-success-emoji{display:block; font-size:40px; margin-bottom:var(--sp-3);}

/* ============================================================
   INSTITUTION BAND — the credibility moment on a public page
   ------------------------------------------------------------
   Added 2026-08-10 for the Research Scholarship, where "who USEF
   works with" is the single most persuasive thing on the page and
   was buried in a row of small pills.

   It is a deep band (same --deep/--deep-ink pair as .u-band, which
   is contrast-checked) carrying ONE statement and then the
   institutions set large in the display face. Names are type, not
   logos: no third-party marks, nothing to go stale, and it reads
   at any width.

   Wrap it in .u-on-deep so buttons inside re-colour correctly.
   ============================================================ */
.u-instband{background:var(--deep); color:var(--deep-ink);
            padding:var(--sp-8) var(--sp-5); border-radius:var(--r-card);}
.u-instband-in{max-width:900px; margin:0 auto; text-align:center;}
/* The gold rule is the only ornament, and it earns its place by
   separating the claim from the evidence. */
.u-instband-rule{width:44px; height:3px; background:var(--gold); margin:0 auto var(--sp-4);}
.u-instband .u-instband-eyebrow{display:block; font-size:var(--fs-tiny); font-weight:800;
            letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
            margin-bottom:var(--sp-3);}
.u-instband h2{color:inherit; font-family:var(--font-display); font-weight:var(--display-weight);
            font-size:clamp(22px,3.4vw,32px); line-height:1.2; letter-spacing:-.01em;
            color:inherit; margin:0 auto var(--sp-4); max-width:20ch; text-wrap:balance;}
/* ⛔ color:inherit is LOAD-BEARING. A bare `p { color: ... }` in a legacy
   page stylesheet beats an inherited value, so without this the lead text
   takes the page's dark body colour and lands on the dark band at 1.43:1.
   Measured, not guessed. Same for any element added here later. */
.u-instband-lead{color:inherit; font-size:var(--fs-body); line-height:1.6; opacity:.86;
            max-width:56ch; margin:0 auto var(--sp-7);}

.u-instlist{display:grid; grid-template-columns:repeat(4,1fr); gap:0;
            border-top:1px solid; border-color:color-mix(in srgb, var(--deep-ink) 22%, transparent);}
.u-inst{padding:var(--sp-6) var(--sp-4); border-left:1px solid;
        border-color:color-mix(in srgb, var(--deep-ink) 22%, transparent);}
.u-inst:first-child{border-left:0;}
.u-inst b{display:block; color:inherit; font-family:var(--font-display); font-weight:var(--display-weight);
        font-size:clamp(18px,2.2vw,25px); line-height:1.15; letter-spacing:-.01em;
        margin-bottom:var(--sp-2);}
.u-inst span{display:block; color:inherit; font-size:12.5px; line-height:1.55; opacity:.72;}

@media (max-width:820px){
  .u-instlist{grid-template-columns:repeat(2,1fr);}
  /* Re-draw the rules for a 2-up grid: no left rule on the first of
     each row, and a top rule on the second row. */
  .u-inst:nth-child(odd){border-left:0;}
  .u-inst:nth-child(n+3){border-top:1px solid;
        border-color:color-mix(in srgb, var(--deep-ink) 22%, transparent);}
}
@media (max-width:520px){
  .u-instband{padding:var(--sp-7) var(--sp-4);}
  .u-instlist{grid-template-columns:1fr;}
  .u-inst{border-left:0; padding:var(--sp-5) 0;}
  .u-inst + .u-inst{border-top:1px solid;
        border-color:color-mix(in srgb, var(--deep-ink) 22%, transparent);}
}