/* =========================================================================
   Font picker styling.

   Its own file because the two surfaces that use it load different
   stylesheets: the editor has mockstack.css, the composer tools have
   feature-graphic.css. Both define the same dark tokens, so the rules here
   work in either context.
   ========================================================================= */
/* ----- Font picker ------------------------------------------------------- */
/* Styled against the dark tool tokens, which both mockstack.css (:root) and
   .fgapp define, so one block covers the editor and every composer tool. */
.msfp { flex: 1; min-width: 0; }
.msfp-trigger {
  width: 100%; padding: 7px 26px 7px 9px; cursor: pointer; text-align: left;
  border: 1px solid var(--border-2); border-radius: 3px;
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23A1A1AA' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right 9px center;
  color: var(--text); font-size: 15px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msfp-trigger:hover { border-color: var(--muted-3); }
.msfp-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.msfp-panel {
  position: fixed; z-index: 9999; display: none; flex-direction: column;
  background: #131316; border: 1px solid #3B3B45; border-radius: 6px;
  box-shadow: 0 20px 50px -12px rgba(0,0,0,.7);
  overflow: hidden;
}
.msfp-panel.show { display: flex; }
.msfp-search {
  flex: 0 0 auto; margin: 7px; padding: 8px 10px;
  border: 1px solid #3B3B45; border-radius: 3px;
  background: #1B1B20; color: #FAFAFA;
  font: 500 12px "Inter", sans-serif;
}
.msfp-search:focus { outline: none; border-color: #6366F1; }
.msfp-list { flex: 1; overflow-y: auto; padding: 0 5px 6px; }
.msfp-list::-webkit-scrollbar { width: 9px; }
.msfp-list::-webkit-scrollbar-thumb { background: #3B3B45; }
.msfp-group {
  padding: 9px 8px 4px; font: 600 9px "JetBrains Mono", monospace;
  letter-spacing: .14em; text-transform: uppercase; color: #71717A;
}
.msfp-row {
  display: block; width: 100%; padding: 7px 9px; cursor: pointer; text-align: left;
  border: 0; border-radius: 3px; background: none; color: #FAFAFA;
  font-size: 16px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* Until the real face arrives the row shows in the UI font. Fading it in
     avoids the jarring reflow of 12 rows all swapping typeface at once. */
  opacity: .55; transition: opacity .18s ease;
}
.msfp-row.loaded { opacity: 1; }
.msfp-row:hover, .msfp-row.active { background: #24242B; }
.msfp-row.on { background: rgba(99,102,241,.16); color: #818CF8; }
.msfp-empty { padding: 14px 10px; text-align: center; color: #71717A; font-size: 12px; }