/* Active website switcher — sits under the wordmark in the section panel.
   Tokens only, radius from the scale, no left-accent stripes (design rules
   1, 4 and 5). Namespaced .mvws-* so it cannot collide with the section
   panel's own long-standing .logo / .panel-head / .acct rules. */

.mvws { position: relative; padding: 10px 12px 2px; }

.mvws-btn {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 9px;
  width: 100%; padding: 8px 9px; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  color: var(--text); transition: border-color .18s ease, background .18s ease;
}
.mvws-btn:hover { border-color: var(--border-strong); background: var(--bg-2); }
.mvws-btn:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: 2px; }

.mvws-av {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--hairline);
  color: var(--purple-bright);
  font: 700 12px/1 var(--font-mono); letter-spacing: 0;
}
.mvws-av-sm { width: 22px; height: 22px; font-size: 11px; }
.mvws-av-add, .mvws-av-warn { color: var(--muted); }

.mvws-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mvws-cap {
  font: 700 8.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
}
.mvws-name {
  font-size: 12.5px; font-weight: 650; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mvws-sub {
  font-size: 10.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mvws-chev { color: var(--text-3); display: grid; place-items: center; }

/* ---- menu ---- */
.mvws-menu {
  position: absolute; left: 12px; right: 12px; top: calc(100% - 2px); z-index: 60;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px; max-height: 340px; overflow-y: auto;
}
.mvws-menu[hidden] { display: none; }
.mvws-menu-h {
  font: 700 9px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); padding: 6px 8px 7px;
}

.mvws-row { display: grid; grid-template-columns: 1fr auto; align-items: center; border-radius: var(--radius); }
.mvws-row:hover { background: var(--bg-2); }
.mvws-row.is-on { background: var(--bg-2); }

.mvws-pick {
  display: grid; grid-template-columns: 22px 1fr 16px; align-items: center; gap: 9px;
  min-width: 0; padding: 7px 8px; background: none; border: 0; cursor: pointer;
  text-align: left; color: var(--text);
}
.mvws-pick:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: -2px; border-radius: var(--radius); }
.mvws-tick { color: var(--purple-bright); display: grid; place-items: center; }

/* Always visible, not revealed on hover. Hover-only actions are invisible on a
   touch screen and undiscoverable everywhere else: you cannot look for a
   control you have no reason to believe exists. They sit at a low contrast so
   they stay quiet without hiding. */
.mvws-row-acts { display: flex; gap: 2px; padding-right: 6px; }
.mvws-row .mvws-mini { opacity: .55; transition: opacity .15s ease, color .15s ease; }
.mvws-row:hover .mvws-mini,
.mvws-row:focus-within .mvws-mini { opacity: 1; }
.mvws-mini {
  display: grid; place-items: center; width: 24px; height: 24px;
  background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; color: var(--muted);
}
.mvws-mini:hover { background: var(--panel); color: var(--text); }
.mvws-mini:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: -2px; }

.mvws-div { height: 1px; background: var(--hairline); margin: 6px 4px; }

.mvws-act {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px; background: none; border: 0; border-radius: var(--radius);
  cursor: pointer; color: var(--text); font-size: 12.5px; font-weight: 600;
}
.mvws-act:hover { background: var(--bg-2); }
.mvws-act:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: -2px; }

/* ---- add dialog ----
   Adding a website is a create step with four decisions in it, so it gets a
   real dialog. Inside a dropdown it was cramped, it scrolled, and a stray click
   threw away what had been typed. */
.mvws-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center; padding: 20px;
  background: rgb(0 0 0 / .55);
  animation: mvws-fade .14s ease-out;
}
.mvws-modal-card {
  width: 100%; max-width: 430px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  padding: 20px;
  animation: mvws-rise .16s ease-out;
}
.mvws-modal-head { margin-bottom: 15px; }
.mvws-modal-t { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--text); }
.mvws-modal-s { margin: 0; font-size: 12px; color: var(--muted); }
.mvws-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@keyframes mvws-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mvws-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mvws-modal, .mvws-modal-card { animation: none; }
}
@media (max-width: 520px) {
  .mvws-fgrid { grid-template-columns: 1fr; }
}

.mvws-form { display: flex; flex-direction: column; gap: 12px; }
.mvws-f { display: flex; flex-direction: column; gap: 4px; }
.mvws-f > span {
  font: 700 9px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
}
.mvws-inp {
  width: 100%; padding: 7px 9px; font-size: 12.5px; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.mvws-inp:focus { outline: 2px solid var(--purple-bright); outline-offset: -1px; border-color: var(--purple-bright); }
.mvws-note { margin: 0; font-size: 10.5px; line-height: 1.45; color: var(--muted); }
.mvws-note.is-bad { color: var(--red); }
.mvws-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.mvws-fbtn {
  padding: 7px 10px; font-size: 12px; font-weight: 650; cursor: pointer;
  color: var(--text); background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.mvws-fbtn:hover { border-color: var(--border-strong); }
.mvws-fbtn.is-go { background: var(--purple-bright); border-color: var(--purple-bright); color: var(--bg); }
.mvws-fbtn:focus-visible { outline: 2px solid var(--purple-bright); outline-offset: 2px; }

/* ---- loading ---- */
.mvws-btn.is-skeleton { cursor: default; pointer-events: none; }
.mvws-lines { display: flex; flex-direction: column; gap: 5px; }
.mvws-l1, .mvws-l2 { height: 7px; border-radius: var(--radius-pill); background: var(--bg-2); }
.mvws-l1 { width: 42%; }
.mvws-l2 { width: 72%; }
.mvws-btn.is-skeleton .mvws-av,
.mvws-l1, .mvws-l2 { animation: mvws-pulse 1.4s ease-in-out infinite; }
@keyframes mvws-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .mvws-btn.is-skeleton .mvws-av, .mvws-l1, .mvws-l2 { animation: none; }
}

/* The rail collapses to icons on narrow screens; the switcher goes with it
   rather than overflowing the panel. */
@media (max-width: 900px) {
  .mvws { padding: 8px 10px 0; }
  .mvws-cap { display: none; }
}

/* ---- website scoping (js/mv-scope.js) ---------------------------------- */
/* Shown at the top of a natively scoped section, so the website being operated
   on is stated rather than inferred from the switcher in the corner. */
.mvscope-mount[hidden] { display: none; }
.mvscope-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 0 0 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.mvscope-ic { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--bg-2); color: var(--purple-bright); }
.mvscope-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mvscope-tx b { font-size: 12.5px; font-weight: 700; color: var(--text); }
.mvscope-tx span { font-size: 11.5px; color: var(--muted); }
.mvscope-swap, .mvscope-cta { margin-left: auto; flex: 0 0 auto; padding: 6px 12px; font-size: 11.5px; font-weight: 600; border-radius: var(--radius-pill); cursor: pointer; }
.mvscope-swap { background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2); }
.mvscope-swap:hover { color: var(--text); border-color: var(--border-strong); }
.mvscope-cta { background: var(--purple-bright); border: 1px solid var(--purple-bright); color: #fff; }
.mvscope-bar.is-none { border-color: var(--amber-border, var(--border)); }
.mvscope-bar.is-none .mvscope-ic { color: var(--amber, var(--text-2)); }
.mvscope-bar.is-loading { min-height: 46px; }
.mvscope-sk { display: block; width: 190px; height: 12px; border-radius: var(--radius-pill); background: var(--bg-2); }
/* A bound field is showing the selected website, not accepting a new one. */
.mvscope-bound { cursor: default; opacity: .92; }
.mvscope-bound:focus { outline: none; }
@media (max-width: 640px) {
  .mvscope-bar { flex-wrap: wrap; }
  .mvscope-swap, .mvscope-cta { margin-left: 0; width: 100%; }
}
/* A bound domain field is replaced by the website it runs on. It occupies the
   row the field occupied, so it reads as the subject of the action next to it
   rather than as a panel about the website. */
.mvscope-hidden { display: none !important; }
/* center, not baseline: the chip sits in a flex row beside the Run button, and
   baseline alignment left the domain sitting off the button's centre line. */
.mvscope-chip { display: inline-flex; align-items: center; align-self: center; gap: 9px; min-width: 0; }
.mvscope-chip-d { font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--text); letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mvscope-chip-d.is-none { color: var(--muted); font-weight: 500; font-style: italic; }
/* Quiet on purpose: the domain is the information, Change is only an escape
   hatch. A bordered pill gave it the same weight as the Run button. */
.mvscope-chip-swap { flex: 0 0 auto; padding: 0; font-size: 11px; font-weight: 500; line-height: 1; color: var(--text-3); background: none; border: 0; cursor: pointer; text-decoration: none; transition: color .15s ease; }
.mvscope-chip-swap:hover { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.mvscope-chip-swap:focus-visible { outline: 1px solid var(--border-strong); outline-offset: 2px; border-radius: var(--radius-xs); }
/* Until the website list has come back we do not know there is no website, so
   the chip waits rather than announcing one. */
.mvscope-chip-sk { display: block; width: 118px; height: 13px; border-radius: var(--radius-pill); background: var(--bg-2); animation: mvws-pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .mvscope-chip-sk { animation: none; } }

/* --- Switch-website dropdown, anchored inside the scope bar ------------- */
.mvscope-bar { position: relative; }
.mvscope-menu { position: absolute; top: calc(100% + 6px); right: 10px; z-index: 60; min-width: 250px; max-height: 320px; overflow: auto; display: flex; flex-direction: column; padding: 6px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: mvscopeMenuIn .18s ease-out; transform-origin: top right; }
@keyframes mvscopeMenuIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mvscope-menu { animation: none; } }
.mvscope-mi { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 11px; border: 0; background: transparent; color: var(--text); font: 600 13px/1.2 inherit; font-family: inherit; border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
.mvscope-mi:hover { background: var(--bg-2); }
.mvscope-mi.is-on { color: var(--purple-bright); background: color-mix(in srgb, var(--purple) 10%, transparent); }
.mvscope-mi svg { flex: none; }
.mvscope-mi-add { justify-content: flex-start; color: var(--text-2); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-top: 4px; padding-top: 11px; }
.mvscope-mi-add:hover { color: var(--text); }
/* Brief settle animation after a switch: the repainted bar fades into place. */
@keyframes mvscopeSwap { from { opacity: .35; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.mvscope-bar.is-swapped { animation: mvscopeSwap .45s ease-out; }
@media (prefers-reduced-motion: reduce) { .mvscope-bar.is-swapped { animation: none; } }

/* ── Add website: the primary action, styled like one ──────────────────────
   It sat as a quiet text row at the foot of the menu, the same weight as the
   sites above it, so the one control that unblocks an empty account read as an
   afterthought. Same treatment as .mvr-cta, which is the primary action
   everywhere else in the app. */
.mvws-act[data-mvws-add],
.mvscope-mi-add {
  background: var(--purple); color: #fff; font-weight: 700;
  transition: background .15s ease, box-shadow .15s ease;
}
.mvws-act[data-mvws-add]:hover,
.mvscope-mi-add:hover { background: #6b4ef0; color: #fff; box-shadow: 0 4px 16px rgba(124,92,252,0.3); }
.mvws-act[data-mvws-add] svg,
.mvscope-mi-add svg { color: currentColor; }
/* The scope menu's version is a footer row with a divider above it; the fill
   replaces that separation, so the border and the square corners go. */
.mvscope-mi-add {
  justify-content: center; border-top: 0; margin-top: 6px; padding: 10px 11px;
  border-radius: var(--radius-sm);
}

/* Nothing on the account yet, so adding one IS the screen's whole purpose. */
.mvws-btn.mvws-add-first { background: var(--purple); border-color: transparent; }
.mvws-btn.mvws-add-first:hover { background: #6b4ef0;  }
.mvws-btn.mvws-add-first .mvws-name,
.mvws-btn.mvws-add-first .mvws-sub { color: #fff; }
.mvws-btn.mvws-add-first .mvws-sub { opacity: .82; }
.mvws-btn.mvws-add-first .mvws-av-add { background: rgba(255,255,255,.18); color: #fff; }

/* ── Long addresses truncate rather than stretching the menu ───────────────
   A domain has no spaces, so it cannot wrap: left alone it pushes the row wider
   than the menu and the tick, the edit and the remove buttons slide out of
   reach. Every cell that holds one is a shrinkable flex/grid child with an
   ellipsis, and the full value stays on the row's title. */
.mvws-menu { max-width: min(92vw, 340px); }
.mvws-row { min-width: 0; }
.mvws-pick > .mvws-txt { min-width: 0; }
.mvscope-menu { max-width: min(92vw, 360px); }
.mvscope-mi { min-width: 0; }
.mvscope-mi-d {
  min-width: 0; flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The menu was pinned left:12/right:12 inside the ~236px section panel, so every
   row had about 100px for a name AND an address and even a moderate domain came
   out as "intern…". It keeps that width as its FLOOR and may grow rightwards
   when the content needs it, capped so it can never run off a narrow screen.
   Short names look exactly as they did. */
.mvws-menu { right: auto; min-width: calc(100% - 24px); max-width: min(92vw, 340px); }

/* ── The switcher itself carries the brand fill ────────────────────────────
   It sat on the panel background with a hairline border, which made the one
   control that says WHICH website everything on screen belongs to read as a
   passive label. It takes the same treatment as the documentation bar's
   Show guide toggle - var(--gradient) on var(--on-brand) - so the two brand
   controls in the app are the same control, not two different purples.
   Everything inside flips to white; the caption and chevron sit at reduced
   opacity so the domain stays the loudest thing in it. */
.mvws[data-mvws-state=ready] .mvws-btn {
  background: var(--gradient); border-color: transparent; color: var(--on-brand);
  transition: filter .15s ease, box-shadow .18s ease;
}
.mvws[data-mvws-state=ready] .mvws-btn:hover {
  background: var(--gradient); border-color: transparent; filter: brightness(1.08);
}
.mvws[data-mvws-state=ready] .mvws-btn:focus-visible { outline-offset: 3px; }
.mvws[data-mvws-state=ready] .mvws-btn .mvws-cap { color: rgba(255,255,255,.72); }
.mvws[data-mvws-state=ready] .mvws-btn .mvws-name { color: var(--on-brand); }
.mvws[data-mvws-state=ready] .mvws-btn .mvws-sub { color: rgba(255,255,255,.80); }
.mvws[data-mvws-state=ready] .mvws-btn .mvws-chev { color: rgba(255,255,255,.85); }
.mvws[data-mvws-state="ready"] .mvws-btn .mvws-av {
  background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.28); color: var(--on-brand);
}

/* ---- Run button with no website connected -------------------------------
   The button becomes the way to fix the thing stopping it, rather than a
   greyed-out dead end. Deliberately NOT styled as disabled: it is the one
   control on the screen that still does something. Kept visually quieter
   than a live run button so it does not read as "your analysis is ready",
   and sized by the button it replaced so no layout moves. */
/* Gated run buttons before the website list has landed.

   The skeleton MASKS the button rather than replacing it: the real label,
   icon and cost chip stay in the box, so the width is already correct when
   the state resolves and nothing reflows. Content is hidden with color and
   visibility rather than display, for the same reason. */
.mvscope-skel{
  position:relative;
  color:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  pointer-events:none;
  cursor:default;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--text) 13%, transparent) 25%,
    color-mix(in srgb, var(--text) 22%, transparent) 37%,
    color-mix(in srgb, var(--text) 13%, transparent) 63%) !important;
  background-size:400% 100% !important;
  animation:mvscopeSkel 1.4s ease-in-out infinite;
}
/* Keeps the space, drops the ink. */
.mvscope-skel > *{visibility:hidden;}
.mvscope-skel svg{visibility:hidden;}
@keyframes mvscopeSkel{
  0%{background-position:100% 0;}
  100%{background-position:0 0;}
}
/* The resolved state arrives rather than snaps. */
.mvscope-settle{animation:mvscopeSettle .36s ease-out;}
@keyframes mvscopeSettle{from{opacity:.35;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .mvscope-skel{animation:none;}
  .mvscope-settle{animation:none;}
}
.mvscope-addsite{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--bg-2);color:var(--text-2);
  border:1px dashed var(--border-strong);
  box-shadow:none;
  cursor:pointer;
}
.mvscope-addsite:hover{
  color:var(--text);
  border-color:var(--purple);
  border-style:solid;
  background:color-mix(in srgb, var(--purple) 8%, transparent);
}
.mvscope-addsite svg{flex:none;color:var(--purple);}
/* The gradient run buttons paint their own background and text colour with
   higher specificity, so the dashed treatment has to outrank them. */
.btn-grad.mvscope-addsite,.ci-run-btn.mvscope-addsite,.sa-run.mvscope-addsite,
.ga-generate-btn.mvscope-addsite,.mv-vfr-btn.mvscope-addsite{
  background:var(--bg-2);color:var(--text-2);
  -webkit-text-fill-color:var(--text-2);
  border:1px dashed var(--border-strong);
}
.btn-grad.mvscope-addsite:hover,.ci-run-btn.mvscope-addsite:hover,
.sa-run.mvscope-addsite:hover,.ga-generate-btn.mvscope-addsite:hover,
.mv-vfr-btn.mvscope-addsite:hover{
  color:var(--text);-webkit-text-fill-color:var(--text);
  border-color:var(--purple);border-style:solid;
}

/* ===================================================================
   Switching website, as a state rather than an instant
   -------------------------------------------------------------------
   A switch changes almost every number on the screen at once. Done with
   no transition it reads as a rendering fault, so the switcher holds a
   busy state and the content it is about to replace steps back while the
   new data lands.

   Deliberately restrained: the content dims and loses a little contrast,
   it does not blur, slide or disappear. Nothing here blocks input either,
   because a switch is fast and taking the UI away for it would be worse
   than the flat swap this replaces. js/mv-websites.js owns the classes.
   =================================================================== */

/* The trigger, while the request is in flight. It already shows the site
   you picked, so this only has to say "working", quietly. */
.mvws-btn.is-switching { cursor: progress; }
.mvws-btn.is-switching .mvws-av {
  animation: mvwsSwitchPulse 1.1s ease-in-out infinite;
}
.mvws-btn.is-switching .mvws-cap { color: var(--purple-bright); }

/* Same footprint as the chevron it replaces, so the button does not resize
   at the moment it is being looked at. */
.mvws-spin {
  width: 14px; height: 14px; flex: 0 0 auto;
  border-radius: var(--radius-pill);
  border: 2px solid color-mix(in srgb, var(--text) 22%, transparent);
  border-top-color: var(--purple-bright);
  animation: mvwsSpin .6s linear infinite;
}
@keyframes mvwsSpin { to { transform: rotate(360deg); } }
@keyframes mvwsSwitchPulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* The content being replaced. Only the open view moves: the rail, topbar and
   switcher stay put so the page does not appear to reload. */
html.mv-switching .main .view:not([hidden]) {
  opacity: .45;
  transition: opacity .18s ease-out;
}

/* ...and the new data arrives rather than snaps. Matches .mvscope-settle,
   which is what a scoped panel already does when its website resolves. */
html.mv-switched .main .view:not([hidden]) {
  animation: mvwsSettle .42s ease-out;
}
@keyframes mvwsSettle {
  from { opacity: .45; transform: translateY(4px); }
  to   { opacity: 1;   transform: none; }
}

/* A switch is a state change, not a decorative flourish, so reduced motion
   keeps the dim (it carries the meaning) and drops everything that moves. */
@media (prefers-reduced-motion: reduce) {
  .mvws-btn.is-switching .mvws-av { animation: none; }
  .mvws-spin { animation: none; border-top-color: var(--purple-bright); }
  html.mv-switched .main .view:not([hidden]) { animation: none; }
}

/* ---- first-run prompt, shown once a website has been added --------------
   Adding a site used to close the dialog and leave the customer on the screen
   they started from, with nothing selected and nothing to do. These are the
   three questions anyone has about a site they just added. Same card as the
   add dialog so it reads as the end of that flow, not a new interruption. */
.mvws-fr-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
.mvws-fr-item {
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--surface-2, rgba(124, 92, 252, 0.05));
  border: 1px solid var(--border); border-radius: var(--radius-base);
  font: inherit; color: inherit; transition: background .12s, border-color .12s;
}
.mvws-fr-item:hover { background: var(--surface-hover, rgba(124, 92, 252, 0.1)); border-color: var(--purple); }
.mvws-fr-item:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.mvws-fr-t { font-weight: 600; font-size: 14px; color: var(--text); }
.mvws-fr-s { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
.mvws-fr-connect {
  display: block; width: 100%; margin: 0 0 12px; padding: 10px 14px;
  background: none; border: 1px dashed var(--border); border-radius: var(--radius-base);
  font: inherit; font-size: 13px; color: var(--purple); cursor: pointer;
}
.mvws-fr-connect:hover { border-color: var(--purple); }
.mvws-fr-connect:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* The optional connect step inside the add dialog. */
.mvws-connect-row { display: flex; align-items: flex-start; gap: 9px; }
.mvws-check { margin-top: 2px; flex: none; }
.mvws-connect-t { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }