/*
 * ops-shell.css — shared authenticated-console chrome for ops.marketplaceprep.com
 *
 * The app shell every authed ops page wears: sticky <mp-header> brand bar, a
 * persistent left-nav sidebar, and a scrolling content column. Loaded by both
 * index.html (dashboard) and admin.html after /mp-tokens.css (so it can lean on
 * the semantic token layer). Surface-specific component CSS stays in each page's
 * own <style> block.
 *
 * Design anchor: an industrial WMS control console. Utilitarian, dense, honest.
 * Depth ladder reads as a real console: header (teal-600) sits on the page
 * (teal-900) which sits beside the deepest sidebar (teal-950). Status is shown
 * with LEDs, not marketing pills; identifiers are monospace.
 *
 * Theme: ops is dark-native — pages force [data-theme="dark"] on <html>, so the
 * dark token values resolve regardless of OS preference. No theme toggle.
 */

:root {
  --ops-header-h: 56px;   /* mp-header height (logo 30px + 12px padding ≈ 54) */
  --ops-sidebar-w: 240px;
}

/* ---------- skip link (first focusable element; shared) ---------- */
.mp-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10001;
  padding: 10px 16px;
  background: var(--mp-primary); color: #06270a;
  font-family: var(--mp-ff-body); font-size: 14px; font-weight: 600;
  border-radius: 0 0 6px 0; text-decoration: none; white-space: nowrap;
}
.mp-skip-link:focus { left: 0; top: 0; outline: 2px solid var(--mp-fg); outline-offset: -3px; }

/* ---------- user-context chip (mp-header slot="ops-context") ---------- */
/* Light-DOM (projected into the shadow slot) so token values resolve here.
   The chip sits in the HEADER, which is the always-dark chassis in BOTH themes,
   so it uses on-brand (light) colors — NOT --mp-fg, which flips dark in light
   mode and would vanish on the dark bar. (Folded in from the retired
   ops-theme.css §5 when ops moved to the canonical shared token layer.) */
.mp-ops-userchip { display: flex; align-items: center; gap: 10px; color: var(--mp-on-brand); }
.mp-ops-email { font-size: 12.5px; color: var(--mp-on-brand); }
.mp-ops-role-chip {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  color: var(--mp-primary-light);
  padding: 2px 8px; border-radius: 999px;
  background: rgba(143, 217, 113, .10); border: 1px solid rgba(143, 217, 113, .22);
}
.mp-ops-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mp-ff-display); font-size: 13px; font-weight: 700;
  color: #04121a; background: linear-gradient(135deg, var(--mp-primary-light), var(--mp-primary));
  flex: none;
}
/* Sign-out + theme buttons also sit on the always-dark header chassis: on-brand. */
.mp-ops-signout-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 500;
  color: var(--mp-on-brand-muted); background: rgba(255, 255, 255, .06); border: 1px solid var(--mp-line-on-brand-strong);
  transition: color .15s, border-color .15s;
}
.mp-ops-signout-btn:hover { color: var(--mp-on-brand); border-color: rgba(255, 255, 255, .34); }
.mp-ops-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 7px; cursor: pointer;
  color: var(--mp-on-brand-muted); background: rgba(255, 255, 255, .06); border: 1px solid var(--mp-line-on-brand-strong);
  transition: color .15s, border-color .15s;
}
.mp-ops-theme-btn:hover { color: var(--mp-on-brand); border-color: rgba(255, 255, 255, .34); }
.mp-ops-theme-btn svg { width: 16px; height: 16px; display: block; }

@media (max-width: 900px) {
  /* The email string is the widest chip element and, with the nav hamburger now
     taking the left of the bar, the first to overflow — drop it here (was 560px);
     keep role + avatar + sign-out. */
  .mp-ops-email { display: none; }
}
@media (max-width: 560px) {
  /* On the narrowest phones drop the role chip too — avatar + sign-out is enough. */
  .mp-ops-role-chip { display: none; }
}

/* ---------- sticky brand bar ----------
 * The <mp-header> host must itself be sticky. Its shadow `.bar` is `position:
 * sticky; top:0`, but that stick is trapped inside the host's own box — and the
 * host is only as tall as the bar, so there's no slack: the host scrolls out of
 * view and takes the "sticky" bar with it. Pinning the host is the actual fix, so
 * the brand bar stays put while the content column scrolls under it. Shared by
 * the dashboard, Clients (admin), and Freight pages (all use `.shell > mp-header`). */
.shell > mp-header {
  position: sticky; top: 0; z-index: 50;
}

/* ---------- app shell: sidebar + content row ---------- */
.ops-shell { display: flex; align-items: flex-start; min-height: calc(100dvh - var(--ops-header-h)); }

.ops-sidebar {
  position: sticky; top: var(--ops-header-h); align-self: flex-start;
  width: var(--ops-sidebar-w); flex: 0 0 var(--ops-sidebar-w);
  height: calc(100dvh - var(--ops-header-h));
  overflow-y: auto;
  /* theme-flipping rail (shared token; was --ops-sidebar-bg). Solid fallback to
     --mp-bg-subtle so the rail is NEVER transparent: in explicit light mode the
     shared --mp-sidebar-bg resolved empty, which painted the off-canvas mobile
     drawer see-through + unreadable over page content (owner-reported). The
     fallback = the intended #f4f5f7 light rail; dark still has the token set
     (graphite), so the fallback engages only on the light path. */
  background: var(--mp-sidebar-bg, var(--mp-bg-subtle));
  border-right: 1px solid var(--mp-line);
  padding: 14px 12px;
  display: flex; flex-direction: column;
}

.ops-nav { display: flex; flex-direction: column; }
.ops-nav-group { margin-bottom: 6px; }
.ops-nav-label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--mp-fg-faint); padding: 12px 10px 6px;
}
.ops-nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--mp-fg-muted); font-size: 13.5px; font-weight: 500;
  text-decoration: none; border-left: 2px solid transparent;
  transition: background .15s, color .15s;
}
/* nav-hover routed through a theme-aware token: a white-alpha wash vanishes on
   the light-mode rail (folded in from retired ops-theme.css). */
.ops-nav-item:hover { background: var(--mp-interactive-bg-hover); color: var(--mp-fg); }
.ops-nav-item.is-active {
  color: var(--mp-fg); background: rgba(91, 170, 59, .12);
  border-left-color: var(--mp-primary);
}
.ops-nav-item.is-soon { opacity: .45; cursor: default; }
.ops-nav-ico { width: 18px; height: 18px; flex: none; }
.ops-nav-text { flex: 1; min-width: 0; }
.ops-nav-soon {
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--mp-fg-faint);
}

/* second-tier nav: the active module's own screens, indented under it. Rendered
   by ops-shell.js subNav() only for the active module that declares `views`
   (today: the Shipping Wallet SPA). Neutral selected state — green stays the
   module-level "you are here" (the parent item's left border), not overloaded. */
.ops-nav-sub { display: flex; flex-direction: column; margin: 2px 0 6px; }
.ops-nav-subitem {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 42px;
  color: var(--mp-fg-muted); font-size: 13px; text-decoration: none;
  border-radius: 8px; transition: background .15s, color .15s;
}
.ops-nav-subitem:hover { background: var(--mp-interactive-bg-hover); color: var(--mp-fg); }
.ops-nav-subitem.is-active { color: var(--mp-fg); background: var(--mp-interactive-bg-hover); font-weight: 600; }
.ops-nav-subdot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; opacity: .55; }
.ops-nav-subitem.is-active .ops-nav-subdot { opacity: 1; }
.ops-nav-subtext { flex: 1; min-width: 0; }
.ops-nav-sublabel {
  padding: 8px 12px 4px 42px; font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mp-fg-faint);
}

/* sidebar footer: system-status LED + restricted notice */
.ops-sidebar-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--mp-line); }
.ops-sys { display: flex; align-items: center; gap: 9px; padding: 8px 10px; }
.ops-led { width: 8px; height: 8px; border-radius: 50%; background: var(--mp-fg-faint); flex: none; }
.ops-led[data-state="online"]  { background: var(--mp-primary-light); box-shadow: 0 0 8px rgba(143, 217, 113, .7); }
.ops-led[data-state="down"]    { background: var(--mp-danger); box-shadow: 0 0 8px rgba(255, 154, 139, .55); }
.ops-led[data-state="checking"]{ background: var(--mp-fg-faint); animation: ops-pulse 1.1s ease-in-out infinite; }
@keyframes ops-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.ops-sys-label { font-size: 11.5px; color: var(--mp-fg-muted); }
.ops-restricted {
  padding: 4px 10px 2px; font-size: 10px; letter-spacing: .03em; color: var(--mp-fg-faint);
}

/* ---------- content column ---------- */
.ops-main { flex: 1 1 auto; min-width: 0; padding: 28px 32px 64px; }
.ops-content { width: 100%; max-width: 1080px; }

.ops-pagehead { margin: 0 0 22px; }
.ops-pagehead h1 {
  font-family: var(--mp-ff-display); font-size: 32px; font-weight: 800;
  letter-spacing: -.6px; margin: 0 0 3px; color: var(--mp-fg);
}
.ops-pagehead p { margin: 0; color: var(--mp-fg-muted); font-size: 13.5px; }

/* ---------- system-status panel (NOC readout — real /api/health data) ---------- */
.ops-status-panel {
  display: flex; flex-wrap: wrap;
  border: 1px solid var(--mp-line); border-radius: 10px;
  background: var(--mp-bg-surface);
  margin-bottom: 28px; overflow: hidden;
}
.ops-stat {
  flex: 1 1 170px; min-width: 150px;
  padding: 14px 18px; border-right: 1px solid var(--mp-line);
  display: flex; flex-direction: column; gap: 6px;
}
.ops-stat:last-child { border-right: none; }
.ops-stat-k {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--mp-fg-faint);
}
.ops-stat-v {
  font-family: var(--mp-ff-body); font-weight: 500; font-size: 13.5px; color: var(--mp-fg);
  display: flex; align-items: center; gap: 8px; word-break: break-word;
}
.ops-stat-v.is-muted { color: var(--mp-fg-faint); }
/* genuine identifiers (build hash, key ids) keep mono — the ONLY honest use */
.ops-stat-v code, .ops-stat-v .mono { font-family: var(--mp-ff-mono); font-size: 12.5px; }

/* ---------- home metrics (core dashboard: attention + portfolio + money) ----------
 * Hierarchy over an equal-tile grid: the page leads with the one thing that may
 * need a human (pending approvals), then two cards each with ONE figure given
 * primacy (active clients / MP margin) and the rest as supporting breakdown. */
.ops-metrics { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }

/* attention banner — the lead. Calm by default; amber + a CTA when actionable. */
.ops-attention {
  display: flex; align-items: center; gap: 16px;
  padding: 17px 20px; border-radius: 10px;
  border: 1px solid var(--mp-line); border-left: 4px solid var(--mp-line-strong);
  background: var(--mp-bg-surface);
}
.ops-attention.is-actionable { border-color: rgba(245, 200, 74, .38); border-left-color: var(--mp-warn); background: var(--mp-warn-bg); }
.ops-attention-ico {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: var(--mp-primary-tint); border: 1px solid var(--mp-primary-border);
}
.ops-attention.is-actionable .ops-attention-ico { background: rgba(245, 200, 74, .12); border-color: rgba(245, 200, 74, .4); }
.ops-attention-ico svg { width: 20px; height: 20px; color: var(--mp-success); }
.ops-attention.is-actionable .ops-attention-ico svg { color: var(--mp-warn); }
.ops-attention-body { flex: 1 1 auto; min-width: 0; }
.ops-attention-title { font-family: var(--mp-ff-display); font-size: 16px; font-weight: 700; letter-spacing: -.2px; color: var(--mp-fg); }
.ops-attention-title b { color: var(--mp-warn); font-weight: 800; }
.ops-attention-sub { font-size: 12.5px; color: var(--mp-fg-muted); margin-top: 2px; }
.ops-attention-err { font-size: 13px; color: var(--mp-fg-muted); }

/* CTA — dark text on amber (legible: ~9:1 on #f5c84a). */
.ops-cta {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 9px;
  font-family: var(--mp-ff-body); font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--mp-warn); color: #2a1d02; border: 1px solid transparent;
  transition: filter .15s;
}
.ops-cta:hover { filter: brightness(1.06); }
.ops-cta:focus-visible { outline: 2px solid var(--mp-focus); outline-offset: 2px; }

/* portfolio + money cards */
.ops-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ops-card {
  display: flex; flex-direction: column;
  padding: 18px 20px; border-radius: 10px;
  border: 1px solid var(--mp-line); background: var(--mp-bg-surface);
}
/* the money card gets the instrument's lit-inset "recessed well" look — one
   source of light from the top (folded in from retired ops-theme.css §5). */
.ops-card.is-money {
  background: var(--mp-bg-surface-2);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .28), inset 0 0 22px rgba(0, 0, 0, .10);
}
:root:not([data-theme="dark"]) .ops-card.is-money,
[data-theme="light"] .ops-card.is-money {
  box-shadow: inset 0 1px 2px rgba(20, 28, 42, .10);
}
.ops-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.ops-card-h .k { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--mp-fg-faint); }
.ops-card-h a { font-size: 12px; color: var(--mp-success); text-decoration: none; white-space: nowrap; }
.ops-card-h a:hover { text-decoration: underline; }
.ops-card-hero { display: flex; align-items: baseline; gap: 9px; }
/* Barlow (brand display face), big + tight — the marketing stat-row treatment.
   NOT monospace: mono numerals on a marketing-brand surface are the tell. */
.ops-card-hero-v {
  font-family: var(--mp-ff-display); font-weight: 800; font-size: 40px;
  letter-spacing: -.5px; line-height: 1; color: var(--mp-fg);
  font-variant-numeric: tabular-nums;
}
.ops-card.is-money .ops-card-hero-v { color: var(--mp-success); }  /* green TEXT => AA token (#2d7a14 light / #8fd971 dark), not the fill */
.ops-card-hero-l { font-size: 12.5px; color: var(--mp-fg-muted); }
.ops-card-sub { font-size: 12px; color: var(--mp-fg-muted); margin-top: 6px; }
.ops-break { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--mp-line); }
.ops-break span { font-size: 12px; color: var(--mp-fg-muted); }
.ops-break b { color: var(--mp-fg); font-weight: 600; font-variant-numeric: tabular-nums; }

/* loading skeleton + inline per-card error (one failed fetch never blanks the page) */
.ops-skel { color: var(--mp-fg-faint); font-size: 13px; }
.ops-card-err { font-size: 12.5px; color: var(--mp-fg-muted); }
.ops-retry {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--mp-success); text-decoration: underline;
}
.ops-retry:hover { filter: brightness(1.1); }

@media (max-width: 720px) {
  .ops-cards { grid-template-columns: 1fr; }
  .ops-attention { flex-wrap: wrap; }
  .ops-cta { width: 100%; justify-content: center; }
}

/* ---------- stations (module launcher) ---------- */
.ops-section-h {
  font-family: var(--mp-ff-body); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--mp-fg-muted);
  margin: 0 0 14px;
}
.ops-stations { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 14px; }
.ops-station {
  display: flex; flex-direction: column; gap: 11px;
  padding: 18px; border-radius: 12px;
  background: var(--mp-bg-surface); border: 1px solid var(--mp-line);
  text-decoration: none; color: inherit;
  transition: border-color .15s, transform .1s, background .15s;
}
a.ops-station:hover {
  border-color: var(--mp-primary-border); transform: translateY(-1px);
  background: var(--mp-bg-surface-2);
}
.ops-station.is-soon { opacity: .55; }
.ops-station-top { display: flex; align-items: center; gap: 12px; }
.ops-station-ico {
  width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center;
  background: var(--mp-primary-tint); border: 1px solid var(--mp-primary-border); flex: none;
}
.ops-station-ico svg { width: 19px; height: 19px; color: var(--mp-success); }
.ops-station-title {
  font-family: var(--mp-ff-display); font-size: 16px; font-weight: 700; letter-spacing: -.2px;
  color: var(--mp-fg);
}
.ops-station-status {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--mp-fg-muted);
}
.ops-station-status .ops-led { width: 7px; height: 7px; }
.ops-station-desc { margin: 0; font-size: 12.5px; color: var(--mp-fg-muted); line-height: 1.5; }

/* keyboard focus ring on stations (mp-tokens.css covers <a>/<button>; explicit here for clarity) */
.ops-station:focus-visible { outline: 2px solid var(--mp-focus); outline-offset: 2px; }

/* ---------- responsive: off-canvas nav drawer (mobile + tablet ≤900px) ----------
 * Below the header's own 900px breakpoint a persistent rail would eat half a phone
 * screen (10 modules + up to ~22 wallet sub-views wrapping as chips — the old
 * horizontal-strip approach). Instead the rail slides OFF-canvas and is summoned by
 * a hamburger — the same handheld pattern RTS uses — collapsing at the same point
 * the header does. Desktop (>900px) is UNTOUCHED: the sticky rail above is unchanged
 * and every rule here lives inside the media query. The toggle + scrim are
 * display:none by default (desktop) and only appear in the query, so they add two
 * inert hidden nodes on desktop and nothing else. Mounted by ops-shell.js
 * mountNavChrome() on every surface that calls renderSidebar (incl. the wallet). */
.ops-nav-toggle,
.ops-nav-scrim { display: none; }

@media (max-width: 900px) {
  /* hamburger — floats in the dark header chassis, top-left; the header host gets
     left padding (below) so the logo clears it. Bars animate to an X when open. */
  .ops-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; top: 8px; left: 8px; z-index: 70;
    width: 40px; height: 40px; padding: 0;
    background: transparent; color: var(--mp-on-brand);
    border: 1px solid var(--mp-line-on-brand-strong); border-radius: 8px; cursor: pointer;
  }
  .ops-nav-toggle:focus-visible { outline: 2px solid var(--mp-primary-light); outline-offset: 2px; }
  .ops-nav-toggle-bars { display: flex; flex-direction: column; gap: 4px; width: 18px; }
  .ops-nav-toggle-bar {
    height: 2px; width: 100%; background: currentColor; border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease;
  }
  .ops-shell.nav-open .ops-nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .ops-shell.nav-open .ops-nav-toggle-bar:nth-child(2) { opacity: 0; }
  .ops-shell.nav-open .ops-nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* clear room for the hamburger by insetting the sticky header's shadow tree
     (host padding shrinks the shadow-root content box → the logo shifts right). */
  mp-header[data-mode="ops"] { padding-left: 48px; }

  /* the rail becomes an off-canvas drawer; its internal VERTICAL layout is kept
     (a scrolling list reads better than the old chip strip and reuses the desktop
     rail exactly — the 22 wallet sub-views just scroll inside it). */
  .ops-shell { flex-direction: column; }
  .ops-sidebar {
    position: fixed; top: var(--ops-header-h); left: 0; bottom: 0;
    width: 84vw; max-width: 320px; height: auto; flex: none; z-index: 65;
    border-right: 1px solid var(--mp-line); border-bottom: none;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 8px 0 24px rgba(0, 0, 0, .28);
  }
  .ops-shell.nav-open .ops-sidebar { transform: translateX(0); }

  /* backdrop behind the open drawer; click (or Esc) to dismiss */
  .ops-nav-scrim {
    display: block; position: fixed; inset: var(--ops-header-h) 0 0 0; z-index: 60;
    background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .ops-shell.nav-open .ops-nav-scrim { opacity: 1; pointer-events: auto; }

  /* The shell's base `align-items: flex-start` keeps main from stretching to full
     height in the desktop row layout. Once direction flips to column the same
     declaration applies to the INLINE axis, making main shrink-to-fit its widest
     descendant — a wide table then sized its own scroll wrapper and pushed the
     whole page sideways instead of scrolling inside `.table-wrap`. Stretch main
     back to the shell width so inner overflow containers actually engage. */
  .ops-main { padding: 22px 18px 48px; align-self: stretch; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .ops-sidebar, .ops-nav-scrim, .ops-nav-toggle-bar { transition: none; }
}

/* ---------- shared client-picker (client-picker.js, P2.1) ---------- */
/* One searchable roster control so staff never hand-type a t_ tenant key. */
.mcp { position: relative; }
.mcp-input {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: var(--mp-text-sm);
  padding: 9px 11px;
  color: var(--mp-fg);
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-line-strong);
  border-radius: 9px;
}
.mcp-input::placeholder { color: var(--mp-fg-faint); }
.mcp-input:focus {
  outline: none;
  border-color: var(--mp-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-focus) 22%, transparent);
}
.mcp-pop {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 320px; overflow-y: auto;
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-line-strong);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
  padding: 5px;
}
.mcp-msg { padding: 12px 11px; color: var(--mp-fg-muted); font-size: var(--mp-text-sm); }
.mcp-msg-err { color: var(--mp-danger); cursor: pointer; }
.mcp-row {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 7px;
  padding: 8px 10px; color: var(--mp-fg);
}
.mcp-row:hover, .mcp-row.is-active { background: var(--mp-bg-subtle); }
.mcp-row-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mcp-name { font-weight: var(--mp-fw-semibold); font-size: var(--mp-text-sm); }
.mcp-contact { font-size: var(--mp-text-xs); color: var(--mp-fg-muted); margin-top: 2px; }
.mcp-cid {
  font-family: var(--mp-ff-mono); font-size: var(--mp-text-xs);
  color: var(--mp-fg-faint); margin-top: 2px;
}
.mcp-badge {
  font-size: 10px; font-weight: var(--mp-fw-semibold); letter-spacing: .03em;
  color: var(--mp-info); background: var(--mp-info-bg);
  border-radius: 4px; padding: 1px 5px;
}
.mcp-status {
  font-size: 10px; font-weight: var(--mp-fw-semibold); text-transform: uppercase;
  letter-spacing: .03em; border-radius: 4px; padding: 1px 6px;
  color: var(--mp-fg-muted); background: var(--mp-bg-subtle);
  border: 1px solid var(--mp-line);
}
.mcp-status-invited { color: var(--mp-info); background: var(--mp-info-bg); border-color: transparent; }
.mcp-status-deactivated { color: var(--mp-danger); background: var(--mp-danger-bg); border-color: transparent; }

/* ---------- touch targets — additive, touch-only (coarse pointers) ----------
   Desktop (pointer:fine) untouched → pixel-identical. Grows the hit height of
   the shared console's interactive controls (incl. the wallet's collapsed
   horizontal nav) for phones/tablets. Geometry only — no new tokens/colors. */
@media (pointer: coarse) {
  .ops-nav-item       { padding-top: 12px; padding-bottom: 12px; }
  .ops-nav-subitem    { padding-top: 10px; padding-bottom: 10px; }
  .ops-cta            { padding-top: 12px; padding-bottom: 12px; }
  .mp-ops-signout-btn { padding-top: 9px; padding-bottom: 9px; }
  .mp-ops-theme-btn   { width: 40px; height: 40px; }
  .mcp-input          { padding-top: 12px; padding-bottom: 12px; }
  .mcp-row            { padding-top: 11px; padding-bottom: 11px; }
}
