/* ── shared list-row components (also used by programs.js / rankings.js — do not repurpose) ── */
    .metric-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);padding:.75rem 1rem;margin-bottom:.35rem}
    .metric-row--hidden{opacity:.5}
    .metric-row__name{font-family:var(--fs);font-weight:600;font-size:.92rem;color:var(--text)}
    .metric-row__desc{font-size:.82rem;color:var(--t2);margin-top:.25rem;line-height:1.35}
    .metric-row__meta{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.35rem}
    .metric-row--editing{align-items:stretch}
    .metric-row__actions{display:flex;gap:.5rem;align-items:center;flex-shrink:0}
    .metric-edit{display:flex;flex-wrap:wrap;gap:.6rem;width:100%;align-items:center}
    .metric-edit .input,.metric-edit .select{flex:1 1 130px;min-width:110px}
    .metric-edit__btns{display:flex;gap:.5rem;flex-shrink:0}
    .metric-tag{font-family:var(--fb);font-size:.56rem;font-weight:700;letter-spacing:0;color:var(--t3);background:var(--s3);border:1px solid var(--b2);border-radius:100px;padding:.15rem .55rem}
    .metric-tag--c{color:var(--lime);border-color:rgba(170,255,0,.3);background:var(--lime-d)}
    .metric-toggle{font-family:var(--fb);font-size:.62rem;font-weight:600;letter-spacing:0;color:var(--t2);border:1px solid var(--b2);border-radius:var(--r);padding:.4rem .8rem;transition:all var(--ease)}
    .metric-toggle:hover{color:var(--lime);border-color:var(--b3)}
    .metric-toggle--on{color:var(--lime);border-color:var(--lime);background:var(--lime-d)}
    .cat-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:#444;border:1px solid var(--b2);border-radius:9px;background:var(--s1);transition:all var(--ease);flex-shrink:0}
    .cat-btn:hover{border-color:var(--b3);color:var(--text);background:var(--s2)}
    .cat-btn[disabled]{opacity:.3;pointer-events:none}
    .cat-btn .ic{width:16px;height:16px}
    .cat-btn--danger:hover{color:#fff;background:var(--red);border-color:var(--red)}
    @media(max-width:580px){
      .metric-row{flex-wrap:wrap;gap:.4rem .7rem}
      .metric-row>div:first-child{flex-basis:100%}
      .metric-row__actions{width:100%;justify-content:flex-end;flex-wrap:wrap;margin-top:.1rem}
    }

    /* ══════════════ BUILD YOUR METRICS — compact-row tree ══════════════ */
    .bt-bar{display:flex;gap:.6rem;align-items:stretch;flex-wrap:wrap}
    .bt-bar .input{flex:1;min-width:160px}
    .bt-bar .btn{flex-shrink:0}
    .bt-bar .btn .ic{width:15px;height:15px;vertical-align:-2px;margin-right:5px}
    /* search + status/category filters — same combined-row rhythm as the Roster toolbar */
    .bt-toolbar{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 1.4rem}
    .bt-toolbar .input,.bt-toolbar .select{min-width:120px}

    /* category cards — read as folders: a distinct icon + generous padding so each one feels
       like a section/container rather than a spreadsheet row, same bigger radius + plain-text
       count as Roster's program-group cards for one consistent "list of cards" system */
    .bt-cat{margin-bottom:.8rem;border-radius:var(--rl);transition:border-color var(--ease),background var(--ease)}
    .bt-cat--dragover{border-color:var(--lime);background:var(--lime-d)}
    .bt-cat>summary{padding:1.15rem 1.25rem}
    .bt-cat:hover>summary{background:var(--s2)}
    .bt-sum{display:flex;align-items:center;gap:.6rem}
    .bt-sum__name{font-family:var(--fd);font-weight:700;font-size:1.05rem;letter-spacing:.02em}
    .bt-sum .acc__count{margin-left:.2rem;background:none;border:none;padding:0;font-weight:600;letter-spacing:0;text-transform:none;color:var(--t3)}
    .bt-sum .acc__chev{margin-left:.2rem}

    /* drag handle — shared by category headers + metric rows. Slightly more visible than a
       pure background element by default (not just on hover) so first-time coaches actually
       notice rows/categories are draggable, with a clear grab affordance on interaction. */
    .bt-drag{display:inline-flex;align-items:center;justify-content:center;color:var(--t3);cursor:grab;flex-shrink:0;padding:.25rem;border-radius:6px;transition:all var(--ease)}
    .bt-drag:active{cursor:grabbing;color:var(--lime)}
    .bt-drag:hover{color:var(--text);background:var(--s3);transform:scale(1.08)}
    .bt-drag .ic{width:16px;height:16px}

    /* subcategory — its own collapsed-by-default accordion nested inside a category, e.g.
       "Squat" grouping Squat 5's/3's/1's under Strength, so a category with several rep-scheme
       variants doesn't dump all of them open at once. Ungrouped metrics (no subcategory) stay a
       flat list with no wrapper, same as before subcategories existed. */
    .bt-sub{margin:.6rem 0 0;border:1px solid var(--b1);border-radius:var(--r);background:var(--s2)}
    .bt-sub:first-child{margin-top:0}
    .bt-subsum{display:flex;align-items:center;gap:.5rem;padding:.55rem .75rem}
    .bt-subsum__name{font-family:var(--fb);font-size:.72rem;font-weight:700;letter-spacing:0;color:var(--t2)}
    .bt-subsum .acc__count{margin-left:.2rem}
    .bt-subsum .acc__chev{margin-left:auto}
    .bt-subsum .acc__chev .ic{width:13px;height:13px}
    .bt-sub .acc__body{padding:.2rem .6rem .6rem}
    .bt-sub .metric-row2:first-child{border-top:none}

    /* compact metric row — one line: drag handle, type badge, name, unit, dir, star, overflow */
    .metric-row2{border-bottom:1px solid var(--b1);transition:background var(--ease)}
    .metric-row2:last-of-type{border-bottom:none}
    .metric-row2--dragover{background:var(--lime-d)}
    .metric-row2--archived{opacity:.55}
    .metric-row2__main{display:flex;align-items:center;gap:.5rem;padding:.5rem .1rem}
    /* Build's own rows no longer carry a type glyph — this rule stays because Log Session's metric
       picker (log-session.js) still uses .mtype-badge, and the class has no stylesheet of its own. */
    .mtype-badge{flex-shrink:0;font-size:1rem;line-height:1;width:22px;text-align:center}
    .mrow-name{flex:2 1 160px;min-width:0;font-family:var(--fs);font-weight:600;font-size:.9rem;color:var(--text);background:transparent;border:1px solid transparent;border-radius:8px;padding:.4rem .5rem}
    .mrow-name:hover{background:var(--s2)}
    .mrow-name:focus{outline:none;background:var(--s1);border-color:var(--lime)}
    .mrow-unit{flex:0 1 72px;min-width:56px;font-family:var(--fb);font-size:.78rem;color:var(--t2);text-align:center;background:transparent;border:1px solid transparent;border-radius:8px;padding:.4rem .3rem}
    .mrow-unit:hover{background:var(--s2)}
    .mrow-unit:focus{outline:none;background:var(--s1);border-color:var(--lime)}
    .mrow-dir{flex:0 0 auto;white-space:nowrap;font-family:var(--fb);font-size:.66rem;font-weight:700;letter-spacing:.03em;color:var(--t2);background:var(--s2);border:1px solid var(--b2);border-radius:100px;padding:.35rem .65rem;transition:all var(--ease)}
    .mrow-dir:hover{border-color:var(--b3);color:var(--text)}
    .mrow-star{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;color:var(--t4);background:none;border:none}
    .mrow-star:hover{background:var(--s2);color:var(--t2)}
    .mrow-star .ic{width:16px;height:16px}
    .mrow-star.is-on{color:var(--lime)}
    .mrow-star.is-on .ic{fill:var(--lime)}
    /* pin/favorite — a different color from the star (Log Session inclusion) so the two
       toggles never read as the same thing at a glance */
    .mrow-pin{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;color:var(--t4);background:none;border:none}
    .mrow-pin:hover{background:var(--s2);color:var(--t2)}
    .mrow-pin .ic{width:15px;height:15px}
    .mrow-pin.is-on{color:var(--blue)}
    .metric-row2--archived .mrow-name,.metric-row2--archived .mrow-unit{color:var(--t3)}

    /* ── PINNED shelf — always-visible favorites at the top of the page, not another
       collapsible accordion, since the whole point is "always appear first" ── */
    .bt-pinned{margin-bottom:1.1rem;border:1px solid var(--b1);border-radius:var(--rl);background:var(--s1);overflow:hidden}
    .bt-pinned__head{display:flex;align-items:center;gap:.5rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--b1)}
    .bt-pinned__icon{display:inline-flex;color:var(--blue)}
    .bt-pinned__icon .ic{width:16px;height:16px}
    .bt-pinned__title{font-family:var(--fd);font-weight:700;font-size:.92rem;letter-spacing:.04em}
    .bt-pinned__head .acc__count{margin-left:.1rem;background:none;border:none;padding:0;font-weight:600;color:var(--t3)}
    .bt-pinned__body{display:flex;flex-wrap:wrap;gap:.5rem;padding:.8rem 1.1rem}
    .bt-pin-row{display:flex;align-items:center;gap:.45rem;background:var(--s2);border:1px solid var(--b2);border-radius:100px;padding:.4rem .5rem .4rem .75rem;font-family:var(--fs);cursor:pointer;transition:all var(--ease)}
    .bt-pin-row:hover{border-color:var(--b3);background:var(--s3)}
    .bt-pin-row__name{font-weight:700;font-size:.82rem;color:var(--text)}
    .bt-pin-row__cat{font-family:var(--fb);font-size:.62rem;font-weight:600;letter-spacing:.04em;color:var(--t3)}
    .bt-pin-row .mrow-pin{width:22px;height:22px;color:var(--blue)}
    .bt-pin-row .mrow-pin:hover{background:var(--s1)}
    .bt-pin-row .mrow-pin .ic{width:13px;height:13px}

    /* ── first-time empty state: quick-start category chips ── */
    .bt-suggest{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;justify-content:center;margin-top:1.1rem}
    .bt-suggest__label{font-family:var(--fb);font-size:.72rem;color:var(--t3);margin-right:.2rem}
    .bt-suggest__chip{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--fb);font-size:.78rem;font-weight:700;color:var(--t2);background:var(--s2);border:1px dashed var(--b2);border-radius:100px;padding:.4rem .8rem;transition:all var(--ease)}
    .bt-suggest__chip:hover{color:var(--lime);border-color:var(--lime);border-style:solid;background:var(--lime-d)}
    .bt-suggest__chip .ic{width:13px;height:13px}

    /* overflow menu popover — shared by category headers + metric rows */
    .ov-menu-wrap{position:relative;flex-shrink:0;margin-left:auto}
    .bt-sum .ov-menu-wrap{margin-left:.3rem}
    .bt-ov-trigger{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;color:var(--t3);background:none;border:none;border-radius:8px}
    .bt-ov-trigger:hover{background:var(--s2);color:var(--text)}
    .bt-ov-trigger .ic{width:16px;height:16px}
    .ov-menu{position:absolute;top:100%;right:0;z-index:80;min-width:190px;background:var(--s2);border:1px solid var(--b2);border-radius:var(--r);box-shadow:0 12px 30px rgba(0,0,0,.35);padding:.35rem;margin-top:.25rem}
    .ov-menu__item{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;font-family:var(--fs);font-size:.82rem;font-weight:500;color:var(--text);padding:.5rem .6rem;border-radius:8px;background:none;border:none}
    .ov-menu__item:hover{background:var(--s3)}
    .ov-menu__item:disabled{opacity:.35;pointer-events:none}
    .ov-menu__item .ic{width:15px;height:15px;flex-shrink:0;color:var(--t3)}
    .ov-menu__item--danger{color:var(--red)}
    .ov-menu__item--danger .ic{color:var(--red)}
    .ov-menu__item--danger:hover{background:var(--red-b,rgba(220,38,38,.1))}
    .ov-menu__sep{height:1px;background:var(--b1);margin:.3rem .2rem}

    /* expanded edit panel (category/subcategory/type/definition) — folds out below a row */
    .bt-expand{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;background:var(--s2);border:1px dashed var(--b3);border-radius:var(--r);padding:.75rem;margin:0 0 .6rem}
    .bt-expand .field{flex:1 1 150px;min-width:130px;margin:0}
    .bt-expand .field--full{flex-basis:100%}
    .bt-expand .btn{flex-shrink:0}

    /* "+ Add Metric" trigger + its inline row */
    .bt-addtrigger{display:flex;align-items:center;gap:.4rem;width:100%;font-family:var(--fb);font-size:.78rem;font-weight:700;color:var(--t2);background:none;border:1px dashed var(--b2);border-radius:var(--r);padding:.65rem .8rem;margin-top:.5rem;transition:all var(--ease)}
    .bt-addtrigger:hover{color:var(--lime);border-color:var(--lime);background:var(--lime-d)}
    .bt-addtrigger .ic{width:15px;height:15px}
    .bt-addrow{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;background:var(--s2);border:1px solid var(--lime);border-radius:var(--r);padding:.7rem;margin-top:.5rem}
    .bt-addrow .bt-add-type{flex:0 1 130px}
    .bt-addrow .bt-add-name{flex:2 1 160px;min-width:0}
    .bt-addrow .bt-add-unit{flex:0 1 80px;min-width:60px}
    .bt-addrow .bt-add-sub{flex:1 1 140px;min-width:100px}
    .bt-addrow .bt-add-dir{flex:0 1 150px}
    .bt-addrow__btns{display:flex;gap:.5rem;flex-shrink:0;margin-left:auto}

    @media(max-width:640px){
      .metric-row2__main{flex-wrap:wrap}
      .mrow-name{flex-basis:100%;order:1}
      .bt-drag{order:0}
      .mrow-unit{order:2;flex:1 1 70px}
      .mrow-dir{order:3}
      .mrow-pin{order:4}
      .mrow-star{order:5}
      .ov-menu-wrap{order:6}
      .bt-expand .field{flex-basis:100%}
      .bt-toolbar{flex-direction:column}
      .bt-toolbar .field,.bt-toolbar .input,.bt-toolbar .select{width:100%;flex:none!important}
      .bt-bar .btn{padding:.55rem .8rem;font-size:.78rem}
    }