/* ===================================================================
   LEVELED MULTI-SELECT -- one shared component: picker, card and modal.

   Extracted 2026-07-30 from THREE page-local copies (catalogue-submit.php,
   catalogue-entry-request.php, catalogue-entry-edit.php). The CSS was
   byte-identical in all three; the JS was NOT -- it had drifted in DOM
   scoping, variable names, and whether a stored level was clamped on
   hydration. Three copies of one widget is also why the proficiency
   ceiling was wrong in five places at once.

   All three thirds move together:
       includes/multiselect-leveled-picker.php   markup
       assets/multiselect-leveled.css            this file
       assets/multiselect-leveled.js             behaviour
   Loaded by the three picker pages AND by catalogue-browse.php, so the
   boost marker below has exactly one definition rather than one per
   surface.

   ---- THE VISUAL GRAMMAR, and the deliberate density variation ----

   Every surface reads the same way:  [base indicator] + [gold +N if boosted]

   The BASE indicator is drawn to suit the surface, and this is a
   deliberate density decision, NOT drift:
       picker, modal   8 pips        -- room to count them
       browse card     a numeral     -- measured 2026-07-30: the card is
                                        339px and its chips are 41px; 8 pips
                                        would make each chip ~88px, so four
                                        chips (352px) already overflow, and
                                        Paldex allows five. Pips there would
                                        wrap to three rows on every entry.
   The BOOST marker is identical everywhere, because it is the part that
   carries meaning rather than magnitude.

   Gold is --sig-gold, the My Signal / premium identity gold. Note that the
   catalogue engine already uses gold for S-tier highlighting on Creatures &
   Companions -- a different catalogue, so no collision on any one card, but
   gold now carries two meanings inside the catalogue system.
   =================================================================== */

/* ---- picker chips ---- */
.ml-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.ml-chips:empty{display:none;}
.ml-chip{display:flex;flex-direction:column;gap:5px;padding:7px 9px;background:rgba(76,141,255,0.12);border:1px solid rgba(76,141,255,0.3);border-radius:8px;}
.ml-chip-top{display:flex;align-items:center;gap:5px;font-size:0.8rem;color:var(--star);}
.ml-chip-top svg{width:14px;height:14px;flex-shrink:0;}
.ml-chip-top span{flex:1;white-space:nowrap;}
.ml-chip-top button{background:none;border:none;color:var(--text-dimmer);cursor:pointer;padding:0;line-height:1;font-size:1rem;flex-shrink:0;}
.ml-chip-top button:hover{color:#ff9baa;}

/* Interactive pips -- unchanged size and spacing from what shipped before,
   deliberately: this is the look Nocturnal already works with daily. Only
   the COUNT changed, from 5 to the natural ceiling of 8. */
.ml-chip-levels{display:flex;gap:3px;align-items:center;}
.ml-chip-level-pip{width:13px;height:13px;border-radius:50%;border:1px solid rgba(143,211,255,0.4);background:none;cursor:pointer;padding:0;flex-shrink:0;}
.ml-chip-level-pip:hover{border-color:var(--star);}
.ml-chip-level-pip.filled{background:var(--star);border-color:var(--star);}

/* ---- display pips (detail modal) ---- */
.ml-pips{display:inline-flex;gap:2px;margin-left:2px;align-items:center;}
.ml-pip{width:6px;height:6px;border-radius:50%;background:var(--line);display:inline-block;flex-shrink:0;}
.ml-pip.filled{background:var(--star);}

/* ---- the boost marker: ONE definition, every surface ---- */
.ml-boost{display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:0.6rem;font-weight:700;line-height:1;letter-spacing:0.02em;color:var(--sig-gold);background:rgba(var(--sig-gold-rgb),0.14);border:1px solid rgba(var(--sig-gold-rgb),0.45);border-radius:4px;padding:2px 4px;margin-left:4px;flex-shrink:0;}

/* The picker's boost CONTROL is the same marker made interactive. Sized for
   touch rather than matched to the 13px pips -- two more sub-minimum targets
   is precisely what this design exists to avoid. */
button.ml-boost{cursor:pointer;min-height:26px;min-width:30px;padding:4px 8px;margin-left:5px;}
button.ml-boost:hover{background:rgba(var(--sig-gold-rgb),0.26);border-color:var(--sig-gold-bright);color:var(--sig-gold-bright);}
/* At exactly the natural ceiling nothing has been earned yet, so the control
   sits neutral and only turns gold once a boost is actually applied. */
button.ml-boost.is-idle{color:var(--text-dimmer);background:none;border-color:var(--line);}
button.ml-boost.is-idle:hover{color:var(--sig-gold);border-color:rgba(var(--sig-gold-rgb),0.45);background:rgba(var(--sig-gold-rgb),0.10);}