/* =====================================================================
   MB SUITE v3 · components: install card (Settings/More) and the share dialog.
   Load after mb-suite-sidebar.css. Uses v1 tokens only; v2 gradients are picked up where present.
   ===================================================================== */
/* ---- install card ---- */
.mb-install{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--r);background:var(--surface)}
.mb-install>.uic{flex:none;width:22px;height:22px;color:var(--accent)}
.mb-install>div{flex:1;min-width:0}
.mb-install b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.mb-install p{margin:2px 0 0;font-size:12.5px;color:var(--ink-2)}
.mb-install p b{display:inline;font-size:inherit}
.mb-install .btn{flex:none}
.mb-install.is-done{border-left-color:var(--good)}
.mb-install.is-done>.uic{color:var(--good-ink)}
@media (max-width:520px){.mb-install{flex-wrap:wrap}.mb-install .btn{width:100%}}

/* ---- share button (put it where the milestone is shown) ---- */
.mb-share-btn .uic{width:16px;height:16px}

/* ---- share dialog ---- */
dialog.mb-share{width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow-pop);overflow:auto}
dialog.mb-share::backdrop{background:var(--scrim)}
.mb-share .ms-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border)}
.mb-share h3{margin:0;font-size:16px;font-weight:650}
.mb-share .ms-prev{position:relative;margin:16px 16px 0;aspect-ratio:1;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.mb-share .ms-prev img{display:block;width:100%;height:100%}
.mb-share .ms-wait{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--muted);font-size:13px}
.mb-share .ms-opts{display:flex;flex-wrap:wrap;gap:4px 16px;padding:12px 16px 0}
.mb-share .ms-opts:empty{display:none}
.mb-share .ms-opt{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-size:13.5px}
.mb-share .ms-note{margin:10px 16px 0;font-size:12px;color:var(--muted)}
.mb-share .ms-btns{display:flex;justify-content:flex-end;gap:8px;padding:14px 16px 16px;margin-top:12px;border-top:1px solid var(--border)}
@media (max-width:520px){.mb-share .ms-btns .btn{flex:1}}
.mb-share [hidden],[data-mb-install][hidden]{display:none!important}
/* v2 banner on phones: keep the text column clear of the art */
@media (max-width:600px){:where(.cu-banner) .cu-txt{max-width:54%}}   /* same as the v2 adapters; low specificity so an adapter can override */