/* secos-mcpapps.css — MCP_Apps.mcp widget kit (Phase 2)
 * Signal design system: violet accent, JetBrains Mono for data/IDs, border-radius 0 on instrument
 * surfaces. Built entirely on the theme-aware Signal tokens (--bg/--ink/--line/--violet/--sev-*,
 * defined at :root + flipped under [data-theme="light"] in styles.css) so light/dark come for free.
 * Prefixes: mcpapp- (public) / mw- (internal). No ad-blocker tokens (ad-/ads/banner/promo/sponsor).
 */

/* ---------- card chrome ---------- */
.mcpapp-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: var(--bg-1, #110e1a);
  border: 1px solid var(--line, #251f33);
  border-radius: 0;
  overflow: hidden;
  color: var(--ink, #f5f3fa);
  font-family: var(--font-sans, 'Inter', sans-serif);
}
.mcpapp-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line, #251f33);
  background: color-mix(in srgb, var(--bg-2, #16121f) 88%, transparent);
}
.mcpapp-bar-title {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink, #f5f3fa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcpapp-bar-tool {
  margin-left: auto;
  flex: none;
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: lowercase;
  color: var(--violet-ink, #c4b5fd);
  background: var(--violet-tint, rgba(124, 58, 237, .16));
  border: 1px solid color-mix(in srgb, var(--violet, #8b5cf6) 30%, transparent);
  padding: 1px 6px;
}
.mcpapp-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding: 12px;
  font-size: 12.5px;
  line-height: 1.5;
}
.mcpapp-body .mono { font-family: var(--font-mono, 'JetBrains Mono', monospace); }

/* ---------- state fragments ---------- */
.mcpapp-loading, .mcpapp-empty, .mcpapp-err {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  color: var(--ink-3, #837b96);
  padding: 14px 2px;
}
.mcpapp-err { color: var(--sev-critical, #fb6f84); }
.mcpapp-loading { animation: mcpappBlink 1.4s ease-in-out infinite; }
@keyframes mcpappBlink { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.mcpapp-tier {
  border: 1px solid color-mix(in srgb, var(--violet, #8b5cf6) 34%, transparent);
  background: var(--violet-tint, rgba(124, 58, 237, .16));
  padding: 16px;
}
.mcpapp-tier-h { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet-ink, #c4b5fd); }
.mcpapp-tier-b { margin-top: 6px; font-size: 12.5px; color: var(--ink-2, #b6afc8); }

/* ---------- severity pill ---------- */
.mcpapp-sev {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 1px 6px;
  border-radius: 0;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.mcpapp-sev-CRITICAL { color: var(--sev-critical, #fb6f84); background: var(--sev-critical-tint, rgba(251, 111, 132, .15)); }
.mcpapp-sev-HIGH     { color: var(--sev-high, #fdba74); background: var(--sev-high-tint, rgba(253, 186, 116, .15)); }
.mcpapp-sev-MEDIUM   { color: var(--sev-medium, #c4b5fd); background: var(--sev-medium-tint, rgba(196, 181, 253, .15)); }
.mcpapp-sev-LOW      { color: var(--sev-low, #6ee7b7); background: var(--sev-low-tint, rgba(110, 231, 183, .15)); }
.mcpapp-sev-UNKNOWN  { color: var(--ink-3, #837b96); background: transparent; }
.mcpapp-kev {
  display: inline-block; font-family: var(--font-mono, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: .06em; padding: 1px 5px; color: var(--sev-critical, #fb6f84);
  border: 1px solid var(--sev-critical, #fb6f84);
}

/* ---------- drill affordances ---------- */
.mcpapp-drill {
  font: inherit;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  color: var(--violet-ink, #c4b5fd);
  background: none;
  border: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--violet, #8b5cf6) 45%, transparent);
  padding: 0 0 1px;
  cursor: pointer;
  text-align: left;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .12s, border-color .12s;
}
.mcpapp-drill:hover { color: var(--violet-bright, #a78bfa); border-bottom-color: var(--violet, #8b5cf6); }
.mcpapp-drill:focus-visible { outline: 2px solid var(--violet, #8b5cf6); outline-offset: 2px; }
.mcpapp-chip, .mcpapp-tagflat {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  padding: 2px 7px;
  margin: 0 4px 4px 0;
  border-radius: 2px;
  border: 1px solid var(--line-2, #342c47);
  background: var(--bg-2, #16121f);
  color: var(--ink-2, #b6afc8);
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.mcpapp-tagflat { cursor: default; }
.mcpapp-chip:hover { border-color: var(--violet, #8b5cf6); color: var(--violet-ink, #c4b5fd); }
.mcpapp-chip:focus-visible { outline: 2px solid var(--violet, #8b5cf6); outline-offset: 1px; }
.mcpapp-chip-cve:hover    { border-color: var(--sev-high, #fdba74); color: var(--sev-high, #fdba74); }
.mcpapp-chip-mitre:hover  { border-color: var(--sky, #7dd3fc); color: var(--sky, #7dd3fc); }
.mcpapp-chip-actor:hover  { border-color: var(--rose, #fb6f84); color: var(--rose, #fb6f84); }
.mcpapp-chiprow { margin-top: 8px; display: flex; flex-wrap: wrap; }

/* ---------- tables ---------- */
.mcpapp-tablewrap { width: 100%; overflow-x: auto; }
.mcpapp-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.mcpapp-table th {
  text-align: left;
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4, #5b5470);
  padding: 4px 8px;
  border-bottom: 1px solid var(--line, #251f33);
  white-space: nowrap;
}
.mcpapp-table td {
  padding: 5px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #251f33) 60%, transparent);
  vertical-align: middle;
  color: var(--ink-2, #b6afc8);
}
.mcpapp-table td.mono { font-family: var(--font-mono, monospace); font-size: 11px; }
.mcpapp-table tr:hover td { background: color-mix(in srgb, var(--violet, #8b5cf6) 7%, transparent); }
.mcpapp-td-title { color: var(--ink, #f5f3fa); max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- whole-row / card drill targets (data-fv-mcp on the wrapper) ---------- */
/* A click (or Enter/Space) anywhere on these rows/cards opens the FvMcp panel — the id
   chip is no longer the only hit target. Row-table hover already highlighted via
   .mcpapp-table tr:hover td; these add the pointer + card hover + keyboard focus ring. */
.mcpapp-tcard[data-fv-mcp][role="button"],
.mcpapp-actorcell[data-fv-mcp][role="button"],
.mcpapp-iocrow[data-fv-mcp][role="button"],
.mcpapp-table tr[data-fv-mcp][role="button"] { cursor: pointer; }
.mcpapp-tcard[data-fv-mcp]:hover,
.mcpapp-actorcell[data-fv-mcp]:hover { border-color: color-mix(in srgb, var(--violet, #8b5cf6) 55%, var(--line, #251f33)); }
.mcpapp-iocrow[data-fv-mcp]:hover { background: color-mix(in srgb, var(--violet, #8b5cf6) 7%, transparent); }
.mcpapp-tcard[data-fv-mcp]:focus-visible,
.mcpapp-actorcell[data-fv-mcp]:focus-visible,
.mcpapp-iocrow[data-fv-mcp]:focus-visible,
.mcpapp-table tr[data-fv-mcp]:focus-visible { outline: 2px solid var(--violet, #8b5cf6); outline-offset: -2px; }

/* ---------- KPI tiles ---------- */
.mcpapp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; }
.mcpapp-tile { border: 1px solid var(--line, #251f33); background: var(--bg-2, #16121f); padding: 12px 10px; text-align: left; }
.mcpapp-tile .v { font-family: var(--font-mono, monospace); font-size: 20px; font-weight: 700; color: var(--violet-ink, #c4b5fd); line-height: 1; }
.mcpapp-tile .l { font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3, #837b96); margin-top: 6px; }

/* ---------- detail / card views ---------- */
.mcpapp-detail { display: block; }
.mcpapp-detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mcpapp-detail-id { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--violet-ink, #c4b5fd); }
.mcpapp-detail-title { font-family: var(--font-display, 'Bricolage Grotesque', sans-serif); font-size: 15px; font-weight: 600; color: var(--ink, #f5f3fa); margin-bottom: 10px; line-height: 1.25; }
.mcpapp-dossier-kind { font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--violet-ink, #c4b5fd); border: 1px solid color-mix(in srgb, var(--violet, #8b5cf6) 34%, transparent); padding: 1px 6px; }
.mcpapp-kv { display: flex; gap: 10px; padding: 3px 0; font-size: 12px; border-bottom: 1px solid color-mix(in srgb, var(--line, #251f33) 55%, transparent); }
.mcpapp-kv .k { flex: none; width: 92px; font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4, #5b5470); }
.mcpapp-kv .v { flex: 1; min-width: 0; color: var(--ink-2, #b6afc8); word-break: break-word; }
.mcpapp-kv .v code { font-family: var(--font-mono, monospace); color: var(--ink, #f5f3fa); }
.mcpapp-desc { margin: 10px 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2, #b6afc8); white-space: pre-wrap; }
.mcpapp-sublist { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.mcpapp-subrow { padding: 3px 0; border-bottom: 1px solid color-mix(in srgb, var(--line, #251f33) 50%, transparent); font-size: 11.5px; }

/* ---------- threat cards ---------- */
.mcpapp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.mcpapp-tcard { border: 1px solid var(--line, #251f33); background: var(--bg-2, #16121f); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.mcpapp-tcard-top { display: flex; align-items: center; gap: 8px; }
.mcpapp-tcard-title { font-size: 12.5px; color: var(--ink, #f5f3fa); line-height: 1.35; }
.mcpapp-tcard-meta { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-mono, monospace); font-size: 10px; color: var(--ink-3, #837b96); }

/* ---------- IOC triage ---------- */
.mcpapp-ioclist { display: flex; flex-direction: column; gap: 1px; }
.mcpapp-iocrow { display: grid; grid-template-columns: 78px 1fr auto; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--line, #251f33) 55%, transparent); }
.mcpapp-ioctype { font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4, #5b5470); }
.mcpapp-iocval { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mcpapp-ioctx { font-size: 10px; color: var(--ink-3, #837b96); text-align: right; }

/* ---------- actor roster ---------- */
.mcpapp-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.mcpapp-actorcell { border: 1px solid var(--line, #251f33); background: var(--bg-2, #16121f); padding: 10px; }
.mcpapp-actorname { font-size: 12.5px; margin-bottom: 6px; }
.mcpapp-actormeta { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-mono, monospace); font-size: 10px; color: var(--ink-3, #837b96); }

/* ---------- hero / landscape / daily theme ---------- */
.mcpapp-hero { border-left: 3px solid var(--violet, #8b5cf6); background: linear-gradient(90deg, var(--violet-tint, rgba(124, 58, 237, .16)), transparent 70%); padding: 14px 16px; }
.mcpapp-hero-title { font-family: var(--font-display, 'Bricolage Grotesque', sans-serif); font-size: 16px; font-weight: 600; color: var(--ink, #f5f3fa); line-height: 1.25; }
.mcpapp-hero-body { margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2, #b6afc8); }

/* ---------- FvMcp primitive host (intel_brief / cluster / heatmap / timeline) ---------- */
.mcpapp-fvhost { min-width: 0; }

/* ---------- mcp_ui sandboxed iframe ---------- */
.mcpapp-frame {
  display: block;
  width: 100%;
  min-height: 220px;
  height: 100%;
  border: 0;
  background: transparent;
  color-scheme: normal;
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .mcpapp-body { padding: 10px; }
  .mcpapp-kv { flex-direction: column; gap: 1px; }
  .mcpapp-kv .k { width: auto; }
  .mcpapp-td-title { max-width: 160px; }
  .mcpapp-cards, .mcpapp-roster { grid-template-columns: 1fr; }
  .mcpapp-iocrow { grid-template-columns: 64px 1fr; }
  .mcpapp-ioctx { display: none; }
}

/* ============================================================================
   Phase 3 — app-runtime LAYOUT engine (secos-mcpapps.js -> window.McpAppRuntime).
   Owns ONLY the layout roots (.mcpapp-grid/.mcpapp-stack/.mcpapp-canvas), the
   widget cell, and the app-shell states. The widget CHROME above (.mcpapp-card,
   .mcpapp-body, tables, tiles, detail, hero, frame…) is Phase 2 — not restyled here.
   `grid-auto-rows` below MUST stay in sync with ROW_H (68) in secos-mcpapps.js —
   grid maps widget.size.h -> px via `grid-row: span h` over these fixed rows.
   ============================================================================ */

/* ---------- app shell (the window body wrapper) ---------- */
.mcpapp-app {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding: 12px;
  background: transparent;               /* inherit the themed window-body surface (light/dark) */
  color: var(--ink, #f5f3fa);
  font-family: var(--font-sans, 'Inter', sans-serif);
}

/* ---------- grid layout: 12 cols, fixed row unit ---------- */
.mcpapp-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 68px;                  /* == ROW_H in secos-mcpapps.js (h -> px) */
  gap: 10px;
  align-content: start;
}

/* ---------- stack layout: full-width, vertical ---------- */
.mcpapp-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- canvas layout: absolute free placement, scrollable ---------- */
.mcpapp-canvas {
  position: relative;
  min-height: 100%;
  min-width: 100%;
}

/* ---------- the widget cell (each holds one Phase-2 .mcpapp-card) ---------- */
.mcpapp-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.mcpapp-canvas > .mcpapp-cell { position: absolute; }
.mcpapp-cell > .mcpapp-card { flex: 1 1 auto; min-height: 0; }  /* card fills its cell */

/* ---------- per-cell hard-fail (widget kit absent / render threw) ---------- */
.mcpapp-cell-err {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px dashed var(--line-2, #342c47);
  background: var(--bg-1, #110e1a);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--sev-critical, #fb6f84);
}

/* ---------- app-shell states (loading / empty / error) ---------- */
.mcpapp-app-loading, .mcpapp-app-empty, .mcpapp-app-err {
  grid-column: 1 / -1;                    /* span the full row when the root is a grid */
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: var(--ink-3, #837b96);
  padding: 24px 4px;
}
.mcpapp-app-loading { animation: mcpappBlink 1.4s ease-in-out infinite; }  /* keyframe from Phase 2 */
.mcpapp-app-err { color: var(--sev-critical, #fb6f84); }

/* ---------- responsive: collapse the 12-col grid on narrow widths ---------- */
@media (max-width: 900px) {
  .mcpapp-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 600px) {
  .mcpapp-app { padding: 10px; }
  .mcpapp-grid { grid-template-columns: 1fr; grid-auto-rows: minmax(64px, auto); gap: 8px; }
  .mcpapp-grid > .mcpapp-cell { grid-column: 1 / -1 !important; }  /* beats inline `span N` */
  .mcpapp-stack { gap: 8px; }
}

/* ============================================================================
 * MCP_Apps.mcp — Phase 4 App Studio (window.McpAppStudio). Prefix: mstudio-.
 * Signal system: violet accent, Bricolage display / Inter UI / JetBrains Mono
 * for data, border-radius 0 on instrument surfaces. Theme-aware via the shared
 * Signal tokens (light/dark come for free). No ad-blocker tokens.
 * ========================================================================== */

/* the studio owns its window body: kill the default .tl-win-body padding/scroll */
html[data-secos] .tl-win-body.mstudio-page { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

.mstudio {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg, #0a0810);
  color: var(--ink, #f5f3fa);
  font-family: var(--font-sans, 'Inter', sans-serif);
}

/* ---------- header ---------- */
.mstudio-head {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line, #251f33);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--violet, #8b5cf6) 12%, transparent), transparent 60%),
    color-mix(in srgb, var(--bg-2, #16121f) 72%, transparent);
}
.mstudio-head-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mstudio-idblock { display: flex; align-items: center; gap: 10px; flex: 1 1 240px; min-width: 190px; }
.mstudio-icon-preview {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none; font-size: 20px; line-height: 1;
  border: 1px solid color-mix(in srgb, var(--violet, #8b5cf6) 42%, transparent);
  background: var(--violet-tint, rgba(124, 58, 237, .16));
  color: var(--violet-ink, #c4b5fd);
}
.mstudio-name {
  flex: 1; min-width: 110px;
  background: transparent; border: none; border-bottom: 1px solid var(--line-2, #342c47);
  color: var(--ink, #f5f3fa);
  font-family: var(--font-display, 'Bricolage Grotesque', var(--font-sans, sans-serif));
  font-size: 20px; font-weight: 600; letter-spacing: .01em; padding: 4px 2px;
}
.mstudio-name::placeholder { color: var(--ink-4, #5c5470); font-weight: 500; }
.mstudio-name:focus { outline: none; border-bottom-color: var(--violet, #8b5cf6); }

.mstudio-layout { display: inline-flex; flex: none; border: 1px solid var(--line-2, #342c47); }
.mstudio-layout-btn {
  font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: .04em;
  padding: 5px 10px; background: transparent; color: var(--ink-3, #837b96);
  border: none; border-left: 1px solid var(--line-2, #342c47); cursor: pointer; transition: color .12s, background .12s;
}
.mstudio-layout-btn:first-child { border-left: none; }
.mstudio-layout-btn:hover { color: var(--ink, #f5f3fa); }
.mstudio-layout-btn[aria-pressed="true"] { background: var(--violet-tint, rgba(124, 58, 237, .18)); color: var(--violet-ink, #c4b5fd); }

.mstudio-actions { display: flex; gap: 6px; flex: none; margin-left: auto; }
.mstudio-btn {
  font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .03em;
  padding: 6px 12px; cursor: pointer; transition: background .12s, border-color .12s, color .12s, opacity .12s;
  background: var(--bg-2, #16121f); color: var(--ink-2, #b6afc8); border: 1px solid var(--line-2, #342c47);
}
.mstudio-btn:hover { border-color: var(--violet, #8b5cf6); color: var(--ink, #f5f3fa); }
.mstudio-btn:focus-visible { outline: 2px solid var(--violet, #8b5cf6); outline-offset: 1px; }
.mstudio-btn:disabled { opacity: .4; cursor: not-allowed; border-color: var(--line, #251f33); }
.mstudio-btn:disabled:hover { color: var(--ink-2, #b6afc8); }
.mstudio-btn--primary {
  background: var(--violet, #7c3aed); border-color: var(--violet, #7c3aed); color: #fff;
}
.mstudio-btn--primary:hover { background: var(--violet-bright, #a78bfa); border-color: var(--violet-bright, #a78bfa); color: #14101f; }
.mstudio-btn--danger { color: var(--sev-critical, #fb6f84); border-color: color-mix(in srgb, var(--sev-critical, #fb6f84) 45%, transparent); }
.mstudio-btn--danger:hover { border-color: var(--sev-critical, #fb6f84); color: var(--sev-critical, #fb6f84); background: color-mix(in srgb, var(--sev-critical, #fb6f84) 12%, transparent); }

.mstudio-icons { display: flex; flex-wrap: wrap; gap: 5px; }
.mstudio-icon {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; cursor: pointer; transition: border-color .12s, background .12s;
  background: var(--bg-1, #110e1a); color: var(--ink-2, #b6afc8); border: 1px solid var(--line, #251f33);
}
.mstudio-icon:hover { border-color: color-mix(in srgb, var(--violet, #8b5cf6) 55%, transparent); }
.mstudio-icon[aria-pressed="true"] { border-color: var(--violet, #8b5cf6); background: var(--violet-tint, rgba(124, 58, 237, .2)); color: var(--violet-ink, #c4b5fd); }

.mstudio-ai {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--violet, #8b5cf6) 34%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--violet, #8b5cf6) 10%, transparent), transparent 70%),
    var(--bg-1, #110e1a);
}
.mstudio-ai-spark { flex: none; font-size: 14px; color: var(--violet-bright, #a78bfa); }
.mstudio-ai-input {
  flex: 1; min-width: 0; background: transparent; border: none; color: var(--ink, #f5f3fa);
  font-family: var(--font-sans, 'Inter', sans-serif); font-size: 12.5px; padding: 4px 0;
}
.mstudio-ai-input::placeholder { color: var(--ink-4, #5c5470); }
.mstudio-ai-input:focus { outline: none; }
.mstudio-ai-gen { flex: none; }

/* ---------- body: rail | mid | preview ---------- */
.mstudio-body { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; }

.mstudio-rail {
  flex: none; width: 236px; min-width: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--line, #251f33); overflow-y: auto; background: var(--bg-1, #110e1a);
}
.mstudio-rail-sec { padding: 11px 12px; border-bottom: 1px solid var(--line, #251f33); }
.mstudio-rail-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px;
  font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3, #837b96);
}
.mstudio-mini {
  font-family: var(--font-mono, monospace); font-size: 10px; padding: 2px 7px; cursor: pointer;
  background: transparent; color: var(--violet-ink, #c4b5fd); border: 1px solid color-mix(in srgb, var(--violet, #8b5cf6) 34%, transparent);
}
.mstudio-mini:hover { border-color: var(--violet, #8b5cf6); }

.mstudio-palette { display: flex; flex-direction: column; gap: 12px; }
.mstudio-pal-cat { font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet-ink, #c4b5fd); margin-bottom: 6px; }
.mstudio-pal-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mstudio-pal-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 6px; cursor: pointer;
  background: var(--bg-2, #16121f); border: 1px solid var(--line, #251f33); color: var(--ink-2, #b6afc8);
  transition: border-color .12s, background .12s, transform .06s;
}
.mstudio-pal-tile:hover { border-color: var(--violet, #8b5cf6); background: var(--violet-tint, rgba(124, 58, 237, .12)); color: var(--ink, #f5f3fa); }
.mstudio-pal-tile:active { transform: translateY(1px); }
.mstudio-pal-tile:focus-visible { outline: 2px solid var(--violet, #8b5cf6); outline-offset: 1px; }
.mstudio-pal-glyph { font-size: 17px; line-height: 1; color: var(--violet-ink, #c4b5fd); }
.mstudio-pal-name { font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: .02em; text-align: center; }

.mstudio-myapps { display: flex; flex-direction: column; gap: 5px; }
.mstudio-myapps-empty { font-family: var(--font-mono, monospace); font-size: 10.5px; color: var(--ink-4, #5c5470); padding: 4px 0; }
.mstudio-app-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer;
  background: var(--bg-2, #16121f); border: 1px solid var(--line, #251f33); transition: border-color .12s;
}
.mstudio-app-row:hover { border-color: color-mix(in srgb, var(--violet, #8b5cf6) 50%, transparent); }
.mstudio-app-row.is-editing { border-color: var(--violet, #8b5cf6); background: var(--violet-tint, rgba(124, 58, 237, .14)); }
.mstudio-app-glyph { flex: none; font-size: 14px; color: var(--violet-ink, #c4b5fd); }
.mstudio-app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mstudio-app-name { font-size: 12px; color: var(--ink, #f5f3fa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mstudio-app-meta { font-family: var(--font-mono, monospace); font-size: 9px; color: var(--ink-3, #837b96); }
.mstudio-app-btns { display: flex; gap: 3px; flex: none; }
.mstudio-app-ico {
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; cursor: pointer; background: transparent; color: var(--ink-3, #837b96); border: 1px solid var(--line-2, #342c47);
}
.mstudio-app-ico:hover { color: var(--violet-ink, #c4b5fd); border-color: var(--violet, #8b5cf6); }
.mstudio-app-ico--rm:hover { color: var(--sev-critical, #fb6f84); border-color: var(--sev-critical, #fb6f84); }

/* meta row + "published to org" badge on a saved app in the My-Apps list */
.mstudio-app-metarow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mstudio-app-shared {
  font-family: var(--font-mono, monospace); font-size: 8px; line-height: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--violet-ink, #c4b5fd); padding: 0 4px; flex: none;
  border: 1px solid color-mix(in srgb, var(--violet, #8b5cf6) 40%, transparent);
  background: var(--violet-tint, rgba(124, 58, 237, .14));
}

/* header "publish to org / published ✓" toggle (enterprise) */
.mstudio-btn--share { color: var(--violet-ink, #c4b5fd); border-color: color-mix(in srgb, var(--violet, #8b5cf6) 42%, transparent); }
.mstudio-btn--share:hover { border-color: var(--violet, #8b5cf6); color: var(--ink, #f5f3fa); }
.mstudio-btn--share-on { background: var(--violet-tint, rgba(124, 58, 237, .2)); border-color: var(--violet, #8b5cf6); color: var(--violet-ink, #c4b5fd); }
.mstudio-btn--share-on:hover { background: var(--violet-tint, rgba(124, 58, 237, .28)); }

/* ---------- rail: org app library (enterprise) ---------- */
.mstudio-orgapps { display: flex; flex-direction: column; gap: 5px; }
.mstudio-org-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  background: var(--bg-2, #16121f); border: 1px solid var(--line, #251f33);
  border-left: 2px solid color-mix(in srgb, var(--violet, #8b5cf6) 45%, transparent);
  transition: border-color .12s;
}
.mstudio-org-row:hover { border-color: color-mix(in srgb, var(--violet, #8b5cf6) 50%, transparent); border-left-color: var(--violet, #8b5cf6); }
.mstudio-org-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mstudio-org-author {
  font-family: var(--font-mono, monospace); font-size: 9px; color: var(--violet-ink, #c4b5fd);
  max-width: 104px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none;
}
.mstudio-org-you {
  font-family: var(--font-mono, monospace); font-size: 9px; line-height: 18px; color: var(--ink-3, #837b96);
  padding: 0 5px; border: 1px solid var(--line-2, #342c47); flex: none;
}
.mstudio-org-fork { flex: none; }

/* ---------- middle: board + config ---------- */
.mstudio-mid {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--line, #251f33); overflow: hidden;
}
.mstudio-board-sec { flex: 1.25 1 0; min-height: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--line, #251f33); overflow: hidden; }
.mstudio-config-sec { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.mstudio-board-h {
  flex: none; padding: 8px 12px; border-bottom: 1px solid var(--line, #251f33);
  font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3, #837b96);
  background: color-mix(in srgb, var(--bg-2, #16121f) 55%, transparent);
}
.mstudio-board { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.mstudio-board-empty, .mstudio-cfg-empty { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--ink-4, #5c5470); padding: 10px 4px; }

.mstudio-w-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; cursor: pointer;
  background: var(--bg-1, #110e1a); border: 1px solid var(--line, #251f33); transition: border-color .12s, background .12s;
}
.mstudio-w-row:hover { border-color: color-mix(in srgb, var(--violet, #8b5cf6) 50%, transparent); }
.mstudio-w-row.is-selected { border-color: var(--violet, #8b5cf6); background: var(--violet-tint, rgba(124, 58, 237, .12)); }
.mstudio-w-glyph { flex: none; font-size: 15px; color: var(--violet-ink, #c4b5fd); }
.mstudio-w-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mstudio-w-type { font-size: 12.5px; color: var(--ink, #f5f3fa); }
.mstudio-w-title { font-size: 11px; color: var(--ink-3, #837b96); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.mstudio-w-tool {
  font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: .04em; padding: 1px 6px;
  color: var(--violet-ink, #c4b5fd); background: var(--violet-tint, rgba(124, 58, 237, .16));
  border: 1px solid color-mix(in srgb, var(--violet, #8b5cf6) 30%, transparent);
}
.mstudio-w-ctrls { display: flex; gap: 3px; flex: none; }
.mstudio-w-ctrl {
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; cursor: pointer; background: var(--bg-2, #16121f); color: var(--ink-3, #837b96); border: 1px solid var(--line-2, #342c47);
}
.mstudio-w-ctrl:hover { color: var(--ink, #f5f3fa); border-color: var(--violet, #8b5cf6); }
.mstudio-w-ctrl:disabled { opacity: .3; cursor: not-allowed; }
.mstudio-w-ctrl--rm:hover { color: var(--sev-critical, #fb6f84); border-color: var(--sev-critical, #fb6f84); }

.mstudio-config { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 11px 12px; display: flex; flex-direction: column; gap: 10px; }
.mstudio-cfg-head { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line, #251f33); }
.mstudio-cfg-glyph { font-size: 16px; color: var(--violet-ink, #c4b5fd); }
.mstudio-cfg-type { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--ink, #f5f3fa); letter-spacing: .02em; }
.mstudio-field { display: flex; flex-direction: column; gap: 4px; }
.mstudio-field-l { font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3, #837b96); }
.mstudio-input, .mstudio-select {
  width: 100%; background: var(--bg-2, #16121f); border: 1px solid var(--line-2, #342c47); color: var(--ink, #f5f3fa);
  font-family: var(--font-mono, monospace); font-size: 12px; padding: 6px 8px;
}
.mstudio-input:focus, .mstudio-select:focus { outline: none; border-color: var(--violet, #8b5cf6); }
.mstudio-input::placeholder { color: var(--ink-4, #5c5470); }
.mstudio-num { width: 96px; }
.mstudio-size { display: flex; gap: 10px; }
.mstudio-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2, #342c47); background: var(--bg-2, #16121f); }
.mstudio-step-dim { font-family: var(--font-mono, monospace); font-size: 9.5px; color: var(--ink-3, #837b96); padding: 0 8px; letter-spacing: .04em; }
.mstudio-step {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer; background: transparent; color: var(--ink-2, #b6afc8); border: none; border-left: 1px solid var(--line-2, #342c47);
}
.mstudio-step:hover { color: var(--violet-ink, #c4b5fd); background: var(--violet-tint, rgba(124, 58, 237, .14)); }
.mstudio-step-v { min-width: 26px; text-align: center; font-family: var(--font-mono, monospace); font-size: 12px; color: var(--ink, #f5f3fa); border-left: 1px solid var(--line-2, #342c47); padding: 0 2px; }
.mstudio-check { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono, monospace); font-size: 11px; color: var(--ink-2, #b6afc8); cursor: pointer; }
.mstudio-check input { accent-color: var(--violet, #7c3aed); width: 15px; height: 15px; }

/* ---------- live preview ---------- */
.mstudio-preview { flex: 1.25 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg, #0a0810); }
.mstudio-preview-h {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--line, #251f33); font-family: var(--font-mono, monospace); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3, #837b96);
  background: color-mix(in srgb, var(--bg-2, #16121f) 55%, transparent);
}
.mstudio-preview-tag {
  font-size: 8.5px; letter-spacing: .08em; padding: 1px 6px; text-transform: none;
  color: var(--violet-ink, #c4b5fd); background: var(--violet-tint, rgba(124, 58, 237, .16));
  border: 1px solid color-mix(in srgb, var(--violet, #8b5cf6) 30%, transparent);
}
.mstudio-preview-body {
  flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px;
  background:
    linear-gradient(color-mix(in srgb, var(--line, #251f33) 40%, transparent) 1px, transparent 1px) 0 0 / 100% 24px,
    var(--bg, #0a0810);
  font-family: var(--font-mono, monospace); font-size: 11px; color: var(--ink-3, #837b96);
}

/* ---------- toast ---------- */
.mstudio-toast {
  position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 8px);
  max-width: 82%; padding: 8px 16px; z-index: 40; pointer-events: none;
  font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: .02em;
  color: #fff; background: var(--violet, #7c3aed); border: 1px solid var(--violet-bright, #a78bfa);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--violet, #7c3aed) 40%, transparent);
  opacity: 0; transition: opacity .18s, transform .18s;
}
.mstudio-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsive: collapse to a single column on narrow windows ---------- */
@media (max-width: 900px) {
  .mstudio-body { flex-direction: column; overflow-y: auto; }
  .mstudio-rail { width: auto; flex: none; border-right: none; border-bottom: 1px solid var(--line, #251f33); overflow: visible; }
  .mstudio-rail-sec .mstudio-pal-tiles { grid-template-columns: repeat(4, 1fr); }
  .mstudio-mid { border-right: none; border-bottom: 1px solid var(--line, #251f33); overflow: visible; }
  .mstudio-board-sec, .mstudio-config-sec { flex: none; overflow: visible; }
  .mstudio-board { max-height: 300px; }
  .mstudio-config { max-height: 340px; }
  .mstudio-preview { flex: none; min-height: 360px; }
  .mstudio-actions { margin-left: 0; }
}
@media (max-width: 560px) {
  .mstudio-rail-sec .mstudio-pal-tiles { grid-template-columns: repeat(3, 1fr); }
  .mstudio-head-main { gap: 8px; }
  .mstudio-name { font-size: 17px; }
}

/* ============================================================================
 * MCP_Apps.mcp — Phase 6 polish: accessibility, motion, unified states, mobile,
 * and the ".mcp file" metaphor. ADDITIVE ONLY — every rule below targets a NEW
 * pseudo-element/state or refines an existing declaration; no Phase 2–4 class
 * the JS depends on is renamed. All motion is <=200ms and fully disabled under
 * prefers-reduced-motion. Prefixes: mcpapp- / mstudio- / mw- (no ad tokens).
 * ========================================================================== */

/* ---------- unified focus-visible ring (violet — never removed w/o a replacement) ---------- */
.mstudio-layout-btn:focus-visible,
.mstudio-icon:focus-visible,
.mstudio-mini:focus-visible,
.mstudio-step:focus-visible,
.mstudio-w-ctrl:focus-visible,
.mstudio-app-ico:focus-visible,
.mstudio-name:focus-visible,
.mstudio-input:focus-visible,
.mstudio-select:focus-visible,
.mstudio-ai-input:focus-visible {
  outline: 2px solid var(--violet, #8b5cf6);
  outline-offset: 1px;
}
/* the div-buttons (board options + saved-app rows) — inset the ring so it doesn't clip neighbours */
.mstudio-w-row:focus-visible,
.mstudio-app-row:focus-visible {
  outline: 2px solid var(--violet, #8b5cf6);
  outline-offset: -2px;
}

/* ---------- widget entrance: a soft fade + rise, once, on mount ---------- */
@keyframes mcpappRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mcpapp-card { animation: mcpappRise .18s ease-out both; }
/* the live preview rebuilds on every edit — keep it calm (no entrance replay while you type) */
.mstudio-preview-body .mcpapp-card { animation: none; }

/* ---------- unified state fragments: one visual language across the kit + shell + studio ---------- */
/* loading -> a violet scanning sweep ("working"); reuses the same treatment kit-wide + app-shell-wide */
.mcpapp-loading, .mcpapp-app-loading { position: relative; }
.mcpapp-loading::after, .mcpapp-app-loading::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 34%;
  background: linear-gradient(90deg, transparent, var(--violet, #8b5cf6), transparent);
  animation: mcpappScan 1.15s ease-in-out infinite;
}
@keyframes mcpappScan {
  0%   { transform: translateX(-40%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(300%); opacity: 0; }
}
/* empty -> a blinking terminal caret ("awaiting input"); same signal in the kit, shell, and studio */
.mcpapp-empty::after, .mcpapp-app-empty::after,
.mstudio-board-empty::after, .mstudio-cfg-empty::after, .mstudio-myapps-empty::after {
  content: '▊'; margin-left: 5px; color: color-mix(in srgb, var(--violet, #8b5cf6) 60%, transparent);
  animation: mcpappBlink 1.4s ease-in-out infinite;
}

/* ---------- hover lift: palette tiles (the "app forge" parts feel pickable) ---------- */
.mstudio-pal-tile { transition: border-color .12s, background .12s, transform .14s ease, box-shadow .14s ease; }
.mstudio-pal-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px color-mix(in srgb, var(--violet, #8b5cf6) 22%, transparent); }
.mstudio-pal-tile:active { transform: translateY(0); }

/* ---------- hover lift: saved-app rows (each is a ".mcp file") ---------- */
.mstudio-app-row { transition: border-color .12s, background .12s, transform .12s ease, box-shadow .12s ease; }
.mstudio-app-row:hover { transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in srgb, var(--violet, #8b5cf6) 18%, transparent); }

/* ---------- focus glow: the AI prompt bar (the "generate" moment) ---------- */
.mstudio-ai { transition: border-color .15s ease, box-shadow .15s ease; }
.mstudio-ai:focus-within {
  border-color: color-mix(in srgb, var(--violet, #8b5cf6) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--violet, #8b5cf6) 55%, transparent),
              0 0 22px color-mix(in srgb, var(--violet, #8b5cf6) 26%, transparent);
}

/* ---------- the ".mcp file" metaphor ---------- */
/* stop the name field from stretching so the ".mcp" suffix hugs the typed name (reads as one filename);
   field-sizing:content makes it grow with the text (Chrome — the SecOS target; ignored elsewhere) */
.mstudio-name { flex: 0 1 auto; field-sizing: content; min-width: 84px; max-width: 60%; }
/* the name field reads as a filename: "<name>.mcp", the suffix in violet mono */
.mstudio-idblock::after {
  content: '.mcp';
  flex: none; align-self: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--violet-ink, #c4b5fd); opacity: .9;
}
/* the icon preview gets a folded corner so it reads as a document/file, not just a swatch */
.mstudio-icon-preview { position: relative; overflow: hidden; }
.mstudio-icon-preview::after {
  content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-style: solid; border-width: 0 12px 12px 0;
  border-color: transparent color-mix(in srgb, var(--violet, #8b5cf6) 60%, var(--bg, #0a0810)) transparent transparent;
}

/* ---------- mobile: touch targets >= 40px; inputs at 16px so iOS doesn't zoom ---------- */
@media (max-width: 600px) {
  .mstudio-btn, .mstudio-layout-btn { min-height: 40px; }
  .mstudio-mini { min-height: 34px; }
  .mstudio-icon { width: 40px; height: 40px; font-size: 18px; }
  .mstudio-w-ctrl { width: 40px; height: 40px; font-size: 12px; }
  .mstudio-step { width: 40px; height: 40px; font-size: 15px; }
  .mstudio-app-ico { width: 34px; height: 34px; font-size: 12px; }
  .mstudio-pal-tile { min-height: 58px; }
  .mstudio-w-row, .mstudio-app-row { padding: 11px 10px; }
  .mstudio-input, .mstudio-select { padding: 10px 8px; font-size: 16px; }
  .mstudio-name { font-size: 18px; }
  .mstudio-ai-input { font-size: 16px; }
}

/* ---------- reduced motion: honor the OS setting across the whole kit + studio ---------- */
@media (prefers-reduced-motion: reduce) {
  [class*="mcpapp-"], [class*="mstudio-"],
  [class*="mcpapp-"]::before, [class*="mcpapp-"]::after,
  [class*="mstudio-"]::before, [class*="mstudio-"]::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .mcpapp-card,
  .mstudio-pal-tile:hover, .mstudio-app-row:hover { transform: none !important; }
}

/* ============================================================================
 * MCP_Apps.mcp — Phase 3 desktop PINS. A pinned app renders as a live, draggable
 * card on the SecOS desktop (renderPinnedCards) and each widget in the runtime app
 * window carries a "pin to desktop" button (injectPinButton). Signal system:
 * violet accent, JetBrains Mono, border-radius 0, theme-aware tokens. The pin
 * layer (#secosMcpPinLayer) is pointer-events:none; cards re-enable pointer events.
 * ========================================================================== */

/* ---------- per-widget pin button (in the Phase-2 card header .mcpapp-bar) ---------- */
.mcpapp-pinbtn {
  margin-left: 6px;
  flex: none;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; cursor: pointer;
  background: transparent;
  color: var(--ink-3, #837b96);
  border: 1px solid var(--line-2, #342c47);
  border-radius: 0;
  transition: border-color .12s, color .12s, background .12s;
}
/* when there's no tool tag to eat the auto-margin, keep the pin button hard-right */
.mcpapp-bar > .mcpapp-pinbtn:first-child,
.mcpapp-bar > .mcpapp-bar-title + .mcpapp-pinbtn { margin-left: auto; }
.mcpapp-pinbtn:hover { border-color: var(--violet, #8b5cf6); color: var(--violet-ink, #c4b5fd); background: var(--violet-tint, rgba(124, 58, 237, .16)); }
.mcpapp-pinbtn:focus-visible { outline: 2px solid var(--violet, #8b5cf6); outline-offset: 1px; }
.mcpapp-pinbtn:disabled { cursor: default; opacity: .8; }

/* ---------- the desktop pin card ---------- */
.mcpapp-pincard {
  position: absolute;
  width: 300px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  min-width: 0; min-height: 0;
  pointer-events: auto;                    /* re-enable over the pointer-events:none layer */
  background: var(--bg-1, #110e1a);
  border: 1px solid var(--line, #251f33);
  border-radius: 0;
  overflow: hidden;
  color: var(--ink, #f5f3fa);
  font-family: var(--font-sans, 'Inter', sans-serif);
  box-shadow: 0 10px 30px color-mix(in srgb, #000 45%, transparent);
}
.mcpapp-pincard.is-drag {
  border-color: var(--violet, #8b5cf6);
  box-shadow: 0 16px 42px color-mix(in srgb, var(--violet, #7c3aed) 34%, transparent);
}
.mcpapp-pincard-head {
  display: flex; align-items: center; gap: 8px;
  flex: none; height: 32px; padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--line, #251f33);
  background: color-mix(in srgb, var(--bg-2, #16121f) 88%, transparent);
  cursor: grab;
  user-select: none; touch-action: none;
}
.mcpapp-pincard.is-drag .mcpapp-pincard-head { cursor: grabbing; }
.mcpapp-pincard-title {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink, #f5f3fa);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mcpapp-pincard-actions { display: flex; gap: 3px; flex: none; }
.mcpapp-pincard-btn {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; cursor: pointer;
  background: transparent; color: var(--ink-3, #837b96);
  border: 1px solid var(--line-2, #342c47); border-radius: 0;
  transition: border-color .12s, color .12s;
}
.mcpapp-pincard-btn:hover { border-color: var(--violet, #8b5cf6); color: var(--violet-ink, #c4b5fd); }
.mcpapp-pincard-btn:focus-visible { outline: 2px solid var(--violet, #8b5cf6); outline-offset: 1px; }
.mcpapp-pincard-btn--x:hover { border-color: var(--sev-critical, #fb6f84); color: var(--sev-critical, #fb6f84); }
.mcpapp-pincard-btn:disabled { opacity: .4; cursor: not-allowed; }
.mcpapp-pincard-body {
  flex: 1 1 auto; min-height: 0; min-width: 0;
  overflow: auto;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px; color: var(--ink-3, #837b96);
}
/* the pin card owns its own scroll; the inner app-shell should not double-pad/scroll */
.mcpapp-pincard-body .mcpapp-app { padding: 8px; overflow: visible; height: auto; }

/* ---------- the studio My-Apps pin toggle ---------- */
.mstudio-app-ico--pin.is-pinned { color: var(--violet-ink, #c4b5fd); border-color: var(--violet, #8b5cf6); background: var(--violet-tint, rgba(124, 58, 237, .16)); }

/* ---------- mobile: bigger touch targets for card + pin controls ---------- */
@media (max-width: 600px) {
  .mcpapp-pincard { width: 86vw; max-width: 340px; }
  .mcpapp-pincard-head { height: 40px; }
  .mcpapp-pincard-btn { width: 32px; height: 32px; font-size: 14px; }
  .mcpapp-pinbtn { width: 30px; height: 30px; font-size: 14px; }
}

/* ============================================================================
 * MCP_Apps.mcp — cross-widget dashboard filter (renderAppSpec app-level filter bar)
 * + the interactive-variant palette tile & the studio "filter bar" toggle. Signal
 * tokens, border-radius 0, theme-aware. No ad-blocker tokens.
 * ========================================================================== */

/* ---------- app-level filter bar (scopes every search-driven widget) ---------- */
.mcpapp-filter {
  display: flex; align-items: center; gap: 8px;
  flex: none; margin-bottom: 10px; padding: 7px 10px; min-width: 0;
  border: 1px solid color-mix(in srgb, var(--violet, #8b5cf6) 30%, var(--line, #251f33));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--violet, #8b5cf6) 9%, transparent), transparent 68%),
    color-mix(in srgb, var(--bg-2, #16121f) 62%, transparent);
}
.mcpapp-filter-label {
  flex: none; font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--violet-ink, #c4b5fd);
}
.mcpapp-filter-input {
  flex: 1 1 auto; min-width: 0;
  background: var(--bg-1, #110e1a); border: 1px solid var(--line-2, #342c47); color: var(--ink, #f5f3fa);
  font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 12px; padding: 6px 8px;
}
.mcpapp-filter-input::placeholder { color: var(--ink-4, #5c5470); }
.mcpapp-filter-input:focus { outline: none; border-color: var(--violet, #8b5cf6); }
.mcpapp-filter-clear {
  flex: none; width: 26px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; cursor: pointer;
  background: transparent; color: var(--ink-3, #837b96); border: 1px solid var(--line-2, #342c47);
}
.mcpapp-filter-clear:hover { color: var(--violet-ink, #c4b5fd); border-color: var(--violet, #8b5cf6); }
.mcpapp-filter-clear:focus-visible { outline: 2px solid var(--violet, #8b5cf6); outline-offset: 1px; }

/* ---------- interactive-variant palette tile (full-width, advertises the 4 views) ---------- */
.mstudio-pal-tile--wide {
  grid-column: 1 / -1;
  flex-direction: row; align-items: center; justify-content: flex-start; text-align: left;
  gap: 9px; padding: 9px 10px;
}
.mstudio-pal-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; align-items: flex-start; }
.mstudio-pal-tile--wide .mstudio-pal-name { text-align: left; font-size: 10.5px; }
.mstudio-pal-sub {
  font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 8.5px; letter-spacing: .03em;
  color: var(--ink-3, #837b96);
}
.mstudio-pal-tile--wide:hover .mstudio-pal-sub { color: var(--violet-ink, #c4b5fd); }

/* ---------- studio header "filter bar" toggle ---------- */
.mstudio-filtertoggle {
  display: inline-flex; align-items: center; gap: 6px; flex: none; cursor: pointer; user-select: none;
  font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 10.5px; letter-spacing: .03em;
  color: var(--ink-2, #b6afc8);
}
.mstudio-filtertoggle input { accent-color: var(--violet, #7c3aed); width: 15px; height: 15px; cursor: pointer; }
.mstudio-filtertoggle:hover { color: var(--ink, #f5f3fa); }
.mstudio-filtertoggle[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.mstudio-filtertoggle[aria-disabled="true"] input { cursor: not-allowed; }

@media (max-width: 600px) {
  .mcpapp-filter-input { font-size: 16px; padding: 9px 8px; }   /* >=16px so iOS doesn't zoom */
  .mcpapp-filter-clear { width: 34px; height: 36px; font-size: 16px; }
  .mstudio-filtertoggle input { width: 18px; height: 18px; }
}

/* ============================================================================
 * MCP_Apps.mcp — studio empty-board STARTER TEMPLATES (#19). Cards fill the board
 * when the app has no widgets yet: an inviting, educational alternative to "click a
 * widget in the palette". Signal tokens, border-radius 0, theme-aware. No ad tokens.
 * ========================================================================== */
.mstudio-templates { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 8px; }
.mstudio-tpl-intro { display: flex; flex-direction: column; gap: 3px; }
.mstudio-tpl-intro-h { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 12px; letter-spacing: .04em; color: var(--ink, #f5f3fa); }
.mstudio-tpl-intro-sub { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 10px; line-height: 1.5; color: var(--ink-3, #837b96); }
.mstudio-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.mstudio-tpl-card {
  display: flex; flex-direction: column; gap: 7px; text-align: left; cursor: pointer; padding: 11px 12px; min-height: 104px;
  background: var(--bg-2, #16121f); border: 1px solid var(--line, #251f33); color: var(--ink-2, #b6afc8);
  transition: border-color .12s, background .12s, transform .12s ease, box-shadow .12s ease;
}
.mstudio-tpl-card:hover {
  border-color: var(--violet, #8b5cf6); background: var(--violet-tint, rgba(124, 58, 237, .1));
  transform: translateY(-2px); box-shadow: 0 6px 18px color-mix(in srgb, var(--violet, #8b5cf6) 20%, transparent);
}
.mstudio-tpl-card:active { transform: translateY(0); }
.mstudio-tpl-card:focus-visible { outline: 2px solid var(--violet, #8b5cf6); outline-offset: 1px; }
.mstudio-tpl-top { display: flex; align-items: center; gap: 8px; }
.mstudio-tpl-ico { flex: none; font-size: 16px; line-height: 1; color: var(--violet-ink, #c4b5fd); }
.mstudio-tpl-name { font-size: 12.5px; font-weight: 600; color: var(--ink, #f5f3fa); }
.mstudio-tpl-desc { font-family: var(--font-sans, 'Inter', sans-serif); font-size: 11px; line-height: 1.4; color: var(--ink-3, #837b96); }
.mstudio-tpl-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.mstudio-tpl-chip {
  font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 8.5px; letter-spacing: .03em; padding: 2px 6px;
  color: var(--violet-ink, #c4b5fd); background: var(--violet-tint, rgba(124, 58, 237, .14));
  border: 1px solid color-mix(in srgb, var(--violet, #8b5cf6) 26%, transparent);
}
.mstudio-tpl-chip--more { color: var(--ink-3, #837b96); background: transparent; border-color: var(--line-2, #342c47); }
/* honor reduced-motion (the shared block above zeroes transitions, but not this hover transform) */
@media (prefers-reduced-motion: reduce) { .mstudio-tpl-card:hover { transform: none !important; } }
@media (max-width: 600px) {
  .mstudio-tpl-grid { grid-template-columns: 1fr 1fr; }
  .mstudio-tpl-card { min-height: 96px; }
}